CODEWITHSUNDEEP
javascriptphpjqueryautocomplete
FrantisekNebojsa
FrantisekNebojsa

Reputation: 49

jquery autocomplete id and value

I would like to use autocomplete to search for city and auto fill city name and city id text boxes. Looks simply, but even I pass thru many examples I am simply not able to make it work :( My biggest success was code below but it makes two separate autocompletes.

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: 

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

Upvotes: 2

Views: 5139

Answers (3)

FrantisekNebojsa
FrantisekNebojsa

Reputation: 49

Finally manage it. Here is the final codes, maybe it will help to someone:

HTML:

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

Script:

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

Upvotes: 0

jaec86
jaec86

Reputation: 45

I think the problem is in the json encoding. In the php handler try this:

$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;

I think is better to make it a function returning a two dimension arrays, wich you can store in a variable $cities. In the javascript code you should do something like this:

<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>

The main problem is that json format is not valid for jquery autocomplete, print it so you can see the difference. Hope it can help you.

Upvotes: 1

Danijel
Danijel

Reputation: 12719

So if you want to fill the #id_city input when the city is selected, use the select event:

PHP: handler_getautocomplete.php should return the json encoded string from an array in the following format:

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

Upvotes: 2

Related Questions