百度搜索

仿百度搜索
开发工具：MyEclipse、MySQL
开发语言：javabean+servlet+jsp、layui 、bootstrap
图如下：


jsp代码如下：
//仿百度搜索框

	$(function(){
		$('#values').keyup(function () {
			var keywords = $(this).val();
            if (keywords == '') { $('#bot_box').hide(); return };
            $.ajax({
                url: '${ctx}/servlet/memberFriendServlet?fun=SelectFriendData&values=' + keywords,
                dataType: 'JSON',
                type: 'POST', 
                beforeSend: function () {
                    $('#bot_box').append('<div class="click_works"><span>正在加载。。。</span></div>');
                },
                success: function (data) {
                    $('#bot_box').empty().show();
                    for(var i=0;i<data.length;i++) {
                        if (data[i].gamename == '') {
                            $('#bot_box').append('<div class="error">Not find  "' + data[i].memberName + '"</div>');
                        }else{
                        	$('#bot_box').append('<div style="position: relative;" class="click_work"><span class="click_work_span">' + data[i].memberName + '</span><span style="position: absolute; top: 0px; right: 250px; font-size: 12px; line-height: 24px;">' + data[i].memberPhone + '</span><span style="position: absolute; top: 0px; right: 0px; font-size: 12px; line-height: 24px;">' + data[i].membernNumber + '</span><input id="input2" type="hidden" value="' + data[i].memberID + '" /></div>');
                        }
                    }
                },
                error: function () {
                    $('#bot_box').empty().show();
                    $('#bot_box').append('<div class="click_works"><span>Fail "' + keywords + '"</span></div>');
                }
            });
		});
		 //点击搜索数据复制给搜索框
        $(document).on('click', '.click_work', function () {
            var word = $(this).find(".click_work_span").text();
            var lise=word;
            $("#oul").val($(this).find("#input2").val());
            $('#values').val(word);
            $('#bot_box').hide();
        });
	});