Javascript Jquery自动完成从第一个字符开始
我想这是以前有人问过的,但我无法让它与我的脚本一起工作。 例如,当我开始在输入字段中输入字母A时,我会得到每个包含字母A的标签 我只想要以字母A开头的标签 这是我的剧本:Javascript Jquery自动完成从第一个字符开始,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我想这是以前有人问过的,但我无法让它与我的脚本一起工作。 例如,当我开始在输入字段中输入字母A时,我会得到每个包含字母A的标签 我只想要以字母A开头的标签 这是我的剧本: <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js">&
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
$(function() {
$( "#tags" ).autocomplete({
source: [{
label: "Apple",
value: "http://www.apple.com"},
{
label: "Google",
value: "http://www.google.com"},
{
label: "Yahoo",
value: "http://www.yahoo.com"},
{
label: "Bing",
value: "http://www.bing.com"}],
minLength: 3,
select: function(event, ui) {
event.preventDefault();
$("#tags").val(ui.item.label);
$("#selected-tag").val(ui.item.label);
window.location.href = ui.item.value;
}
,
focus: function(event, ui) {
event.preventDefault();
$("#tags").val(ui.item.label);
}
});
});
.ui自动完成{
最大高度:100px;
溢出y:自动;
/*防止水平滚动条*/
溢出x:隐藏;
}
/*IE 6不支持最大高度
*我们用高度来代替,但这迫使菜单总是这么高
*/
*ui自动完成{
高度:100px;
}
$(函数(){
$(“#标记”).autocomplete({
资料来源:[{
标签:“苹果”,
值:“http://www.apple.com"},
{
标签:“谷歌”,
值:“http://www.google.com"},
{
标签:“雅虎”,
值:“http://www.yahoo.com"},
{
标签:“必应”,
值:“http://www.bing.com"}],
最小长度:3,
选择:功能(事件、用户界面){
event.preventDefault();
$(“#标记”).val(ui.item.label);
$(“#所选标记”).val(ui.item.label);
window.location.href=ui.item.value;
}
,
焦点:功能(事件、用户界面){
event.preventDefault();
$(“#标记”).val(ui.item.label);
}
});
});
这是我的html:
<div class="ui-widget">
<label for="tags" style="float:left; margin-right:5px; font-size:12px; margin-top:10px; margin-left:55px; text-align:right;">Search Engines:</label>
<input type="text" placeholder="Search for engine..." id="tags" style="width:150px; padding:3px; margin:9px 0 0 0; float:right;" />
</div>
搜索引擎:
我的脚本可以像现在这样吗
提前感谢试试这个
var data = [
{
label: "Apple",
value: "http://www.apple.com"
},
{
label: "Google",
value: "http://www.google.com"
},
{
label: "Yahoo",
value: "http://www.yahoo.com"
},
{
label: "Bing",
value: "http://www.bing.com"
}];
$(function() {
$( "#tags" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( data, function( item ){
return matcher.test( item.label );
}) );
},
minLength: 1,
select: function(event, ui) {
event.preventDefault();
$("#tags").val(ui.item.label);
$("#selected-tag").val(ui.item.label);
window.location.href = ui.item.value;
},
focus: function(event, ui) {
event.preventDefault();
$("#tags").val(ui.item.label);
}
});
});
参见参见