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

Answer 2

我認為問題出在 json 編碼上。 在 php 處理程序中試試這個：

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

while($city=mysql_fetch_array($query)){
    $value[] = $city['city_name'];
    $id[] = $city['city_id'];
}

$city_array = array('value' => json.encode(array_values($value)),
                   'id' => json.encode(array_values($id))
                  );
return $city_array;

我認為最好使它成為一個返回二維數組的函數，您可以將其存儲在變量 $cities 中。 在 javascript 代碼中，您應該執行以下操作：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function(){
    $("#city").autocomplete({source: <?php echo $cities['value']; ?>, minLength: 1});
    $("#id_city").autocomplete({source: <?php echo $cities['id']; ?>, minLength: 1});
</script> 

主要問題是 json 格式對於 jquery 自動完成無效，打印它以便您可以看到差異。 希望它可以幫助你。

Answer 3

最后管理它。 這是最終的代碼，也許它會對某人有所幫助：

HTML：

    City : <input type="text" id="city" name="city" />
    ID_city : <input type="text" id="id_city" name="id_city" />

腳本：

<script type="text/javascript">
$(document).ready(function(){
    var ac_config = {
        source:'handler_getautocomplete.php',
    select: function(event, ui) { 
        $('#id_city').val(ui.item.value); 
        event.preventDefault(); 
        $("#city").val(ui.item.label); },    
        minLength:1
    };
    $("#city").autocomplete(ac_config);
});
</script>   

PHP：

$term = trim(strip_tags($_GET['term']));
$query=mysql_query("SELECT city_name, id_city FROM cities WHERE city_name like '%".$term."%'");


$matches = array();

    while($city=mysql_fetch_array($query) and $i<10){
    $matches[]=array('value' => $city['id_city'],
                     'label' => $city['city_name'])                 
                         ;}
print json_encode($matches);