Jquery autocomplete方法实现下拉模糊查询

最新推荐文章于 2024-09-10 14:15:01 发布

大脑斧

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量484

点赞数

文章标签： asp html

本文链接：https://blog.csdn.net/weixin_41154756/article/details/88100062

版权

//例子

<div class="col-xs-7">
            <input id="iptTest" />
        </div>
    <script>
        $(function () {
            $('#iptTest').autocomplete({
                minLength: 1,
                source: function (request, response) {
                    //console.log(request.term);//传input中的输入值
                    $.ajax({
                        url: "test.asmx/GetStringlst",
                        data: "{ 'content':'" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                var items = item.split('-');
                                return {
                                    label: item,//下拉框显示值
                                    value: items[1]//选中后填充到input框的值
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                            console.log(textStatus + "/" + errorThrown);
                        }
                    });
                },
                //设置input只能为选中值,不可自定义填写
                change: function (event, ui) {
                    if (!ui.item) {
                        $(this).val('');
                    }
                }
            });
        });
    </script>