4

我认为这是以前有人问过的，但我无法让它与我的脚本一起使用。当我开始在输入字段中输入时，例如我从字母 AI 开始，获取包含字母 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"></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);
    }
});
});

这是我的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>

我的脚本可以像现在这样吗？

提前致谢

4

1 回答 1

10

尝试这个

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);
   }
 });
});

看演示

于 2013-10-04T11:22:43.943 回答