如何使用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。所以印度泰米爾納德邦）。 您需要對這個示例進行更多思考。 如果您有不同的表，則使用聯接。