知识学堂 > 课程 > 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>