2013-04-27 105 views
0

我有jQuery自动填充脚本工作,填充我的文本框,因为用户键入推荐结果。jQuery自动填充停止搜索内

$("#tags").autocomplete({ 
source: availableTags, 
open: function(event, ui) { 
     $(".ui-autocomplete").css({ 
      'width' : '600px' 
     }); 
    } 
}); 
}); 

我需要做的是停止在选项内搜索,并从第一个字母开始搜索。

例如,如果一个选项是“蓝色”,并且用户键入“Bl”,那么“蓝色”应该像它一样填充,但我不希望用户输入“ue”并且出现“蓝色”作为一个选项。

编辑:立足岗位下面我想这个剧本,但它似乎没有工作:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>jQuery UI Real Autocomplete</title> 

<!-- jQuery UI | http://jquery.com/ http://jqueryui.com/ http://jqueryui.com/docs/Theming --> 
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
<script> 
var availableTags = [ 
    "ActionScript", 
    "AppleScript", 
    "Asp", 
    "BASIC", 
    "C", 
    "C++", 
    "Clojure", 
    "COBOL", 
    "ColdFusion", 
    "Erlang", 
    "Fortran", 
    "Groovy", 
    "Haskell", 
    "Java", 
    "JavaScript", 
    "Lisp", 
    "Perl", 
    "PHP", 
    "Python", 
    "Ruby", 
    "Scala", 
    "Scheme" 
]; 
$("#tags").autocomplete({ 
    source: function(request, response) { 
    var matches = $.map(availableTags, function(tag) { 
     if (tag.toUpperCase().indexOf(request.term.toUpperCase()) === 0) { 
     return tag; 
     } 
    }); 
    response(matches); 
    } 
}); 

</script> 
</head> 
<body> 

    <label for="tags">Tags: </label> 
    <input id="tags"> 

</body> 
</html> 

回答

2

退房jQuery的论坛链接: https://forum.jquery.com/topic/select-only-items-that-start-with-jquery-ui-autocomplete

的一个该链接中的海报提供了这个例子: http://jsbin.com/avoyu5/1/edit

如果你输入“sc”,你会发现它的工作原理是你想要的(它不会显示你“javascript”,但它会显示你“斯卡拉”)

+0

我完全复制了脚本,但它似乎并没有工作。不知道它为什么在jsbin中工作,而不是在本地测试时。 – NCoder 2013-04-27 19:12:35

+0

我已经发布了@dseliahu上面的脚本 – NCoder 2013-04-27 19:13:48