[英]jQuery autocomplete
I am reading my Karaoke list from a DB and that works well but want i want to do is be able to type in a string in a search form and as I type it starts to load songs and/or artists that match. 我正在从数据库中读取我的卡拉OK列表,效果很好,但我想做的就是能够在搜索表单中键入字符串,并且在键入时开始加载匹配的歌曲和/或艺术家。
I know the basics of what I need but not sure on what I need to do the auto-complete? 我知道我需要什么的基础知识,但不确定我需要做什么来完成自动完成吗?
any help or resource will will be Helpful 任何帮助或资源将是有帮助的
Here is the jQuery UI Autocomplete documentation: 这是jQuery UI自动完成文档:
http://jqueryui.com/autocomplete/ http://jqueryui.com/autocomplete/
Here is an example of how it should be implemented: 以下是应如何实施的示例:
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)
You can use jQuery autocomplete, Include library and depended files as in the order it should appear here is autocomplete 您可以使用jQuery自动完成功能,包含库和相关文件,因为它在此处显示为自动完成的顺序
PHP code 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 code 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.