jquery清空输入框_jQuery搜索关键词联想

READINGjQuery· 搜索关键词联想

    网上各种关联插件、代码多不胜数，下面就是我亲测可以使用的简单关键词联想代码，是有jQuery完成，无插件，要求不高的朋友可以看看。

ajax服务端

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

//这里是JavaScriptSerializer需要的导入

using System.Web.Script.Serialization;

public partial class _1111 : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        //*********

        //需要导出的List数据这里就不写明了

        //*********

        //这里用JavaScriptSerializer来封装List返回json格式数据。

        JavaScriptSerializer jss = new JavaScriptSerializer();

        Response.Write(jss.Serialize("需要返回的List集合"));

    }

}

页面端

        $(document).ready(function () {

            //输入框 联想搜索下拉提示

            var result = new Array();

            $('#常量ID').keyup(function (event) {

                if ($('#常量ID').val() != '') {

                    //当输入框的值不为空的时候才能发送请求

                    $.ajax({

                        type: "POST",

                        url: "请求服务端",

                        data: "Id=" + $('#常量ID').val(),

                        success: function (msg) {

                            var obj = eval('(' + msg + ')');

                            var oli_i;

                            $('li').remove();

                            //先清空之前记录

                            for (var i = 0; i < obj.length; i++) {

                                //拼接li

                                oli_i = $('

' + obj[i].title + ' ');

                                //添加 li

                                $('#box ul').append(oli_i);

                                //点击查询结果写入input

                                $('#box ul li').eq(i).click(function () {

                                    //写入input

                                    $('#常量ID').val($(this).text());

                                    //添加完成关闭 li

                                    $('li').remove();

                                });

                            };

                        }

                    });

                } else {

                    $('#box ul').html('');

                    //如果输入框的词都删除了，把获取的数据结果也清空，因为已经获取到数据了，即使阻止再次发送请求也不会把已经获得的数据清除，所以这里直接用了最简单的办法，直接清空数据

                };

            });

        });