オートコンプリート値のIDを取得するためのスクリプト
<script type="text/javascript">
$(function() {
$('#location').val("");
$("#location").autocomplete({
source: "getLocation.php",
minLength: 1,
select: function(event, ui) {
$('#locationid').val(ui.item.id);
}
});
});
</script>
IDを非表示で渡します
<form action="" method="post" name="addvendor" id="addvendor">
<label>Location:</label>
<input type="text" name="location" id="location" /><span id="locationInfo"></span>
<input type="hidden" name="locationid" id="locationid" />
</form>
場所とIDの値を取得するためのページを取得
<?php
include('../config/config.php');
$return_arr = array();
/* If connection to database, run sql statement. */
$fetch = mysql_query("SELECT location_id,location_name FROM location where location_name like '" . mysql_real_escape_string($_GET['term']) . "%'");
/* Retrieve and store in array the results of the query.*/
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['id'] = $row['location_id'];
$row_array['value'] = $row['location_name'];
//$row_array['abbrev'] = $row['country_id'];
array_push($return_arr,$row_array);
}
echo json_encode($return_arr);
?>
注:スタイルにはjsファイルbootstrap.min.jsを含めてください
<link rel="stylesheet" href="http://www.jensbits.com/demos/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
詳細については、リンク
http://www.jensbits.com/demos/autocomplete/を使用してください。