javascript - jquery自动完成id和值

Question

我想使用自动完成功能来搜索城市并自动填充城市名称和城市 ID 文本框。看起来很简单，但即使我通过了很多例子，我也根本无法使其工作:( 我最大的成功是下面的代码，但它产生了两个单独的自动完成。

HTML:

  <form action="form_handler_event_add.php" 
        method="post" 
        name="form_event_add">
    City: <input type="text" id="city" name="city" />
    ID_City : <input type="text" id="id_city" name="id_city" />
</form>

脚本:

    <script type="text/javascript">
            $(document).ready(function(){
                $("#city").autocomplete({
                    source:'handler_getautocomplete.php',
                    minLength:1
                });
                $("#id_city").autocomplete({
                    source:'handler_getautocomplete.php',
                    minLength:1
                });
            });
    </script>     

handler_getautocomplete.php:

 $query=mysql_query("SELECT * FROM cities WHERE city_name like '%".$term."%'");
 $json=array();

    while($city=mysql_fetch_array($query)){
         $json[]=array(
                    'value'=> $city["city_name"],
                    'id'=>$city["id_city"]
                        );
    }

 echo json_encode($json);

Answer 1

因此，如果您想在选择城市时填充#id_city 输入，请使用 select事件:

PHP:handler_getautocomplete.php 应按以下格式从数组返回 json 编码字符串:

$json = [
    [ 'id' => 1, 'value' => 'New York' ],
    [ 'id' => 2, 'value' => 'Alabama' ],
    [ 'id' => 4, 'value' => 'Seatle' ],
    [ 'id' => 6, 'value' => 'San Francisco' ]
];

JS:

$("#city").autocomplete({
    source:'handler_getautocomplete.php',
    minLength:1,
    select: function( event, ui ) {
        $( '#id_city' ).val( ui.item.id );                  
    }
});