如何使用SQL数据库创建自动完成文本框，例如Google Place文本框

Question

我必须在以下情况下在我的Web表单中创建自动完成文本框

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

2. 如果我输入城市名称，则自动建议应显示数据库中的国家和州名，同样，州名也应显示

例如 ：如果用户键入

泰米尔纳德邦

那么结果将是

印度泰米尔纳德邦

如果用户在文本框中输入chennai，则自动完成建议应为

印度泰米尔纳德邦金奈

如果用户键入Erode tamilnadu

那么结果应该是

印度泰米尔纳德邦埃罗德

3. 我对每个值（例如城市，州和国家/地区）使用了不同的表格

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

我的问题是我如何才能实现如上所述的结果，例如将多个条目输入到文本框并将多个建议作为输出（例如Google Place Search）

请引导我，我已经在网上搜索了所有内容，但是我找不到理想的解决方案

这是我的脚本代码

 <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
                });
            });

Answer 2

您必须编写带有3个列的选择的SQL查询。 1>国家2>国家3>城市。 SQL查询应具有3个条件。

像下面

if(select count(1) from Table where cityname like "@cityname")
begin

select city,state,country from table

end

else if(select count(1) from Table where state like "@statename")
begin

select 1 as city, state,country from table

end

else if(select count(1) from Table where country like "@countryname")

begin

select 1 as city, 1 as state, country from table

end

请使用ajax在json中获取此值。

然后，在每列的末尾附加'，'分隔符（例如，Chennai，Tamilnadu，印度）。

如果任何列值为1，则将其忽略。 例如（1，印度泰米尔纳德邦，然后省略1。所以印度泰米尔纳德邦）。 您需要对这个示例进行更多思考。 如果您有不同的表，则使用联接。