jQuery 自动完成

Question

我想为用户所在的城市构建一个 jquery 自动完成输入字段。当用户开始输入单词时，我想以这种格式显示具有最密切关联的 5 个城市的列表 [城市，国家]

我有三个表

1. 国家（id，国家名称）
2. 区域（id，区域名称，国家ID）
3. 城市（id，城市名称，区域ID，国家ID）

当用户选择一个城市时，我想捕获城市的ID以将其插入数据库中。

我应该如何使用自动完成来做到这一点？

我应该使用城市的 id 设置隐藏字段还是传递城市的名称，然后检查其 id 进行选择是什么？这里的问题是全球各地都有同名的城市，并且会通过差异来识别它。

JS 代码

$("#UserCity").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://localhost/baku/users/location/",
            dataType: "json",
            data: {
                data: request.term
            },
            success: function (data) {
                /// Need to modify this part
                response($.map(data.geonames, function (item) {
                    return {
                        label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                        value: item.name
                    }
                }));
            }
        });
    },
    minLength: 2
});

示例 JSON 字符串我从 Ajax 获取

[{"name":"Banaras, Uttar Pradesh, India","city_id":"1927","region_id":"2193","country_id":"113"},{"name":"Banda, Uttar Pradesh, India","city_id":"1938","region_id":"2193","country_id":"113"},{"name":"Bangalore, Karnataka, India","city_id":"1949","region_id":"2185","country_id":"113"},{"name":"Banganapalle, Andhra Pradesh, India","city_id":"1950","region_id":"2169","country_id":"113"},{"name":"Banswara, Rajasthan, India","city_id":"1983","region_id":"2190","country_id":"113"},{"name":"Banur, Punjab, India","city_id":"1987","region_id":"2189","country_id":"113"}]

我想将名称显示为列表并通过表单将 City_id 作为可传递参数，这样我就不需要再次进行数据库查询。

阵列

Array
(
    [0] => Array
        (
            [name] => Banaras, Uttar Pradesh, India
            [city_id] => 1927
            [region_id] => 2193
            [country_id] => 113
        )

    [1] => Array
        (
            [name] => Banda, Uttar Pradesh, India
            [city_id] => 1938
            [region_id] => 2193
            [country_id] => 113
        )

    [2] => Array
        (
            [name] => Bangalore, Karnataka, India
            [city_id] => 1949
            [region_id] => 2185
            [country_id] => 113
        )

    [3] => Array
        (
            [name] => Banganapalle, Andhra Pradesh, India
            [city_id] => 1950
            [region_id] => 2169
            [country_id] => 113
        )

    [4] => Array
        (
            [name] => Banswara, Rajasthan, India
            [city_id] => 1983
            [region_id] => 2190
            [country_id] => 113
        )

    [5] => Array
        (
            [name] => Banur, Punjab, India
            [city_id] => 1987
            [region_id] => 2189
            [country_id] => 113
        )

)

Answer 1

HTML：

<input type="text" name="city" id="city" />
<input type="hidden" name="city_id" id="city_id" />

JQuery：

$('input.city').autocomplete('/ajax/autocomplete-city.php').result(function(e, data){
    $('city_id'.val(data[1]);
});

PHP：

$query = mysql_real_escape_string($_GET['q']);

$rs = mysql_query("
    SELECT
        CONCAT_WS(', ', city.city_name, region.region_name, country.country_name)
    ,   city.id
    FROM
        city
    INNER JOIN
        region ON region.id = city.region_id
    INNER JOIN
        country ON country.id = city.country_id
    WHERE
        city.city_name LIKE '$query%'
    LIMIT 10
");

while ($r = mysql_fetch_row($rs))
{
    echo implode("|", $r);
    echo "\n";
}

Answer 2

当面对两个实例具有相同名称的可能性时，我总是添加一个独特的东西来区分它们（但这只是为了让用户能够做出正确的选择）。通常，您的城市应该有不同的 ID（它们应该是唯一的）。