jQuery插件之AutoComplete使用方法

https://files.cnblogs.com/jianjialin/jquery.autocomplete.js
https://files.cnblogs.com/jianjialin/jquery.autocomplete.css 
public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        context.Response.Write(getProducts(context));
    }
    private string getProducts(HttpContext context)
    {
        string sql = "select * from products";
        string re = JsonHelper.ConvertDataTableToJson(SqlHelper.ExecuteDataSet(sql).Tables[0]);
        return re;
    }

    <script type="text/javascript">
        /*==========用户自定义方法==========*/
        //城市数据
        var cityList;
        //autocomplete选项
        var options = {
            minChars: 1,
            max: 500,
            width: 250,
            matchContains: true,
            formatItem: function(row, i, max) {//显示出来的项格式
                return i + "/" + max + ": \"" + row.ProductID + "\" [" + row.ProductName + "]";
            },
            formatMatch: function(row, i, max) {
                return row.ProductName; //用户输入的内容在哪些数据项里面搜索。例如现在是在productName搜索，若要加上ProductID则为 return row.productID+" "+ row.ProductName;
            },
            formatResult: function(row) {
                return row.ProductName;
            }
        };
        //autocomplete初始化函数
        function initAutoComplete(json) {
            $("#inputName").autocomplete(json, options);
            $("#inputName").result(function(event, data, formatted) {//data 选中的行json对象. formatted是formatMatch返回的值.
                $("#inputId").val(data.ProductID);
            });
        }
        /*==========加载时执行的语句==========*/
        $(function() {
            //加载城市数据, 并在回调函数中用返回的数据初始化autocomplete
            $.getJSON("products.ashx", {}, function(json) {
                initAutoComplete(json);
            })
        });        
    </script>
    <link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;">
        <h3>
            Demo. 应用AutoComplete插件 </h3>
        <br style="clear: both" />
        <div class="formLabel">
            <label for="inputName">请输入城市拼音和汉字:</label>
        </div>
        <div class="formInput">
            <input id="inputName" name="inputName" type="text" />
        </div>
        <br style="clear:both" />
        <br style="clear: both" />
        <div class="formLabel">
            <label for="inputId">城市ID:</label></div>
        <div class="formInput">
            <input id="inputId" name="inputId" type="text" /></div>
        <br style="clear: both" />
        <br style="clear: both" />
    </div>
</body>
posted @ 2009-11-09 11:37  MyCoolDog  阅读(1752)  评论(1)  编辑  收藏  举报