仿百度搜索
开发工具: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();
});
});