用于获取自动完成值 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/