Question

我想为用户所在的城市构建一个jquery自动完成输入字段。当用户开始输入单词时，我想显示一个列表，其中包含5种具有此格式最接近关联的城市[城市，国家] < / p>

我有三张桌子

国家/地区（id，country_name）
地区（id，region_name，country_id）
城市（id，city_name，region_id，country_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
});

我从Ajax获取的示例JSON字符串

[{"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

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

Answer 2

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

jQuery自动完成

2 个答案: