知识学堂 > 课程 >
asp.net jQuery搜索关键词联想
asp.net jQuery搜索关键词联想
发布日期:2020/12/16
来源:聚恒【返回】
ajax服务端:
JavaScriptSerializer jss = new JavaScriptSerializer();
Response.Write(jss.Serialize(BiaoXing_list));
返回list集合,封装为json
页面端:
<input type="text" name="textfield4" id="biaoxing" class="Fill" runat="server" />
<div class="box" id="box">
<ul>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
//输入框 联想搜索下拉提示
var result = new Array();
$('#biaoxing').keyup(function (event) {
if ($('#biaoxing').val() != '') { //当输入框的值不为空的时候才能发送请求
$.ajax({
type: "POST",
url: "Ajaxbiaoxing.aspx",
data: "Id=" + $('#biaoxing').val(),
success: function (msg) {
var obj = eval('(' + msg + ')');
var oli_i;
$('li').remove(); //先清空之前记录
for (var i = 0; i < obj.length; i++) {
oli_i = $('<li> ' + obj[i].title + ' </li>'); //拼接li
$('#box ul').append(oli_i); //添加 li
//点击查询结果写入input
$('#box ul li').eq(i).click(function () {
$('#biaoxing').val($(this).text()); //写入input
$('li').remove(); //添加完成关闭 li
});
};
}
});
} else {
$('#box ul').html(''); //如果输入框的词都删除了,把获取的数据结果也清空,因为已经获取到数据了,即使阻止再次发送请求也不会把已经获得的数据清除,所以这里直接用了最简单的办法,直接清空数据
};
});
});
</script>