作为实习生,我正在为一个研究所制作一个门户网站。
目前正在制作电话簿上的模块。我的导师要求我在输入员工姓名的文本字段上应用 AJAX。我通过 phpMyAdmin 使用 Dreamweaver CS4 和 MySQL 数据库。
我的问题是:如何在文本字段上应用 AJAX,以便在输入单个字符时整个员工姓名列表显示为列表。它和谷歌一样,它提供建议。我进行了很多搜索,但没有得到任何代码。此外,Dreamweaver 的功能非常有限,使用它变得越来越困难。
作为实习生,我正在为一个研究所制作一个门户网站。
目前正在制作电话簿上的模块。我的导师要求我在输入员工姓名的文本字段上应用 AJAX。我通过 phpMyAdmin 使用 Dreamweaver CS4 和 MySQL 数据库。
我的问题是:如何在文本字段上应用 AJAX,以便在输入单个字符时整个员工姓名列表显示为列表。它和谷歌一样,它提供建议。我进行了很多搜索,但没有得到任何代码。此外,Dreamweaver 的功能非常有限,使用它变得越来越困难。
如果您使用 Twitter Bootstrap,我从另一个问题中部分窃取了一个很好的解决方案,可以帮助您解决问题(如果您还没有集成,请相信我,它会让您的生活更轻松):
因此,这是名称文本字段的代码:
<form class="navbar-search">
<input type="text" id="search" class="search-query span3 pull-right" placeholder="Search" data-provide="typeahead">
<div class="icon-search"></div>
</form>
接下来,您将需要一些 jQuery 代码来执行 AJAX 部分:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.0.min.js"><\/script>')</script>
<!-- Bootstrap jQuery plugins compiled and minified -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap JS Code -->
<script>
$(document).ready(function(){
$('#search').typeahead({
source: function(query, process) {
$.ajax({
url: 'database.php'
type: 'POST';
data: 'query=' + query;
dataType: 'JSON';
async: true;
success: function(data) {
process(data);
}
});
}
});
});
</script>
最后,您需要创建 database.php 它将搜索您的数据库并将值返回到您的搜索栏:
<?php
if (isset($_POST['query'])) {
// Connect to database
mysql_connect('[database url]','[username]','[password]');
mysql_select_db('[database name]');
// Retrieve the query
$query = mysql_real_escape_string($_POST['query']);
// Search the database for all similar items
$sql = mysql_query("SELECT * FROM names WHERE name LIKE '%{$query}%'");
$array = array();
while ($row = mysql_fetch_assoc($sql)) {
$array[] = $row['name'];
}
// Return the json array
echo json_encode($array);
}
?>
我想这两个链接可能会帮助你实现你想要的。http://beski.wordpress.com/2009/11/20/jquery-php-mysql-ajax-autocomplete/。 http://jqueryui.com/autocomplete/