jQuery Auto-Fill在搜索中停止

时间:2013-04-27 18:44:30

标签: jquery jquery-ui autocomplete

我已经让jQuery自动填充脚本在用户输入以填充结果时填充我的文本框。

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

我需要做的是停止在选项内搜索,然后从第一个字母中搜索。

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

编辑:根据下面的帖子我正在尝试这个脚本,但它似乎不起作用:

<!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>

1 个答案:

答案 0 :(得分:2)

在Jquery的论坛上查看此链接: https://forum.jquery.com/topic/select-only-items-that-start-with-jquery-ui-autocomplete

该链接中的一张海报以此为例: http://jsbin.com/avoyu5/1/edit

如果您输入“sc”,您会看到它的功能完全符合您的要求(它不会显示“javascript”,但它会显示“scala”)