2013-10-04 42 views
4

我认为这是之前有人问过的,但我无法让它与我的脚本一起工作。 当我在输入字段开始打字和例如我开始以字母AI得到包含字母A.Jquery自动完成从第一个字符开始

我只想以字母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> 

这可能与我的剧本就像是现在?

在此先感谢

+0

看到http://forum.jquery.com/topic/select-only-items-that-start-with- jquery-ui-autocomplete –

回答

8

尝试这个

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

查阅DEMO

+0

Thnx !!这是伟大的工作!你让我今天一整天都感觉很好!:) – user1511766

相关问题