c# - 如何使用 SQL 数据库创建像 Google 放置文本框一样的自动完成文本框

Question

我必须在我的网络表单中为以下条件创建自动完成文本框

1. 如果我输入国家/地区名称，那么自动完成建议应显示存储在我的数据库中的国家/地区、州和城市名称的列表。

2. 如果我输入城市名称，那么自动建议应该显示我的数据库中的国家/地区和州名称，类似的州名称也

例如:如果用户输入

泰米尔纳德邦

那么结果就是

印度泰米尔纳德邦

如果用户在文本框中输入 chennai 那么自动完成建议应该是

印度泰米尔纳德邦钦奈

如果用户输入 Erode tamilnadu

那么结果应该是

侵 eclipse ，泰米尔纳德邦，印度

我对每个值(例如城市、州和国家/地区)使用不同的表格

到目前为止我所做的就是一个仅显示城市搜索的文本框

我的问题是如何实现我上面提到的结果，例如将多个条目输入到文本框以及将多个建议作为输出(例如谷歌地点搜索)

请指导我，我在网上搜索过，但找不到完美的解决方案

这是我的脚本代码

 <script  type ="text/javascript" >
    $(function () {
        $('#<%=txtSearch.ClientID%>').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "Default.aspx\getCityName",
                    data: "{'pre':'" + request.term + "'} ",
                    datatype: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {

                            return {
                                cityname: item.cityname,
                                country: item.country,

                                json: item

                            }
                        }));

                    },
              error: function (XMLHttpRequest, textStatus,                               errorThrown) {
                        alert(textStatus);
                    }

                });
            },

            focus: function (event, ui) {
                $('#<%=txtSearch.ClientID%>').val(ui.item.cityname);
                return false;
            },
            select: function (event, ui) {
                $('#<%=txtSearch.ClientID%>').val(ui.item.citycame);
                return false;
            }

        }).data("ui.autocomplete")._renderItem = function (ul, item) {
            return $("<li>")
            .append("<a>City:" + item.cityname + "<br>Country :" + item.country + "</a>")
            .appendTo(ul);
        };

    });

</script>

我的网络服务代码:

 [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static List<Searchcity> getCityName(String pre) 
    {
        List<Searchcity> allcity = new List<Searchcity>();
        using(MydatabaseEntities dc = new MydatabaseEntities())
        {
            allcity = (from a in dc.Searchcities
                       where a.cityname.StartsWith(pre)
                       select a).ToList();

        }
        return allcity;
    }

Answer 1

这可能对你有帮助!

AJAX

 var Autoarr = [];

        $.ajax({
                 url: "',
                dataType: "json",
                async: false,
                success: function (data) {
                    var result = $.map(data, function (val, key) {
                        return { type: key, cityname: val.cityname, country: val.country};
                    });

                    for (var i = 0; i < result.length; i++) {
                        Autoarr[i] = result[i].cityname;
                    }

                }
            });

自动完成

 $(function () {

                $("#category").autocomplete({
                    source: Autoarr
                });
            });