我正在从数据库中读取卡拉OK清单,但效果很好,但我想要的是能够在搜索表单中输入字符串,并且在我输入字符串时开始加载歌曲和/或艺术家比赛。jQuery自动完成
我知道我需要什么的基础知识,但不知道我需要做什么自动完成?
任何帮助或资源将将有助于
我正在从数据库中读取卡拉OK清单,但效果很好,但我想要的是能够在搜索表单中输入字符串,并且在我输入字符串时开始加载歌曲和/或艺术家比赛。jQuery自动完成
我知道我需要什么的基础知识,但不知道我需要做什么自动完成?
任何帮助或资源将将有助于
这里是jQuery用户界面自动完成文件:
http://jqueryui.com/autocomplete/
这里是它应该如何实现一个例子:
var AutoCompleteOptions = { source: function(request, response) {
$.ajax({
url: 'your URL here',
dataType: "json",
data: {
itemToSearch: request.term // could be any data you are passing in for search
},
success: function(data) {
// do something where search values are returned
},
});
},
select: $.proxy(function(event, ui){
// what you want to do with that information
// using a proxy to preserve the reference to 'this'
return false; // prevent the default response (typically inserting the selected value into the textbox the dropdown is being displayed from.
},this),
open: function(event, ui) {
// things to do when the dropdown is rendered
return false; // prevent default autocomplete open action
},
focus: function(event, ui) {
// what to do when an the user hovers over an item in the drop down
return false; // prevent default autocomplete open action
},
minLength:0 // be sure to set this if you want to be able to trigger the search event manually and have it display results
};
var Input = $("input");
Input.autocomplete(this.AutoCompleteOptions)
你可以使用jQuery自动完成,包括库和依赖文件,按照它应该出现的顺序 here is autocomplete
PHP代码
public function cities() {
$term = $_GET['term'];
$cities = array("one","two","three");// contains value fetched from DB
$filtered = array();
foreach ($cities as $city) {
if (stripos($city, $term) !== false) {
array_push($filtered, $city);
}
}
echo json_encode($filtered);
exit;
}
jQuery代码
<script>
$(function() {
function log(message) {
$("<div>").text(message).prependTo("#log");
$("#log").scrollTop(0);
}
$("#textboxid").autocomplete({
source: "cities",
minLength: 2,
select: function(event, ui) {
log(ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value);
}
});
});
</script>
您所需要的资源就在这里。搜索[jquery自动完成](http://stackoverflow.com/search?q=jquery+autocomplete),你会发现。例如[这里](http://stackoverflow.com/questions/419229/where-can-i-find-a-list-of-jquery-autocomplete-options-such-as-mustmatch-highlig) – mplungjan 2011-04-13 14:20:55
尽可能我可以看到多数民众赞成只是打倒一个菜单,你可以选择我想要它来更新页面,因为我键入有点像谷歌的剂量 – 2011-04-13 14:25:42
所以它不是自动完成,你实际上有一个问题..? – Jaymz 2011-04-13 14:26:40