Question

我很遗憾再次提出这个问题。我正在尝试在我的网站上实现自动完成功能。我在页面上有一个包含所有选项的html列表。

<div id="list"><ul><li>option1</li><li>option2</li><li>option3</li></ul></div>

在我的javascript文件中，我使用HTML中的列表创建了数组：

  $(function () {
var lst_source = $("#list");
var lst_options = $("li", loc_source);

lst_options.each(function(){
// Creating my array here
    });

有了这个，我试图在用id =“list”标识的文本框上启用自动完成功能。我搜索了很多，但无法理解实现，所以它的工作原理。我不能在这里使用ajax，只能使用局部变量。

请指导我。

Answer 1

这是来自jqueryUi示例本身：

// Set the array of results    
var countryList = ["Afghanistan", "Albania", "Algeria"/*... and so on*/];

// Set the autocomplete for the countries input
$("#countries").autocomplete({
    source: countryList
});

<强> HTML

<input id="countries">

Answer 2

如果你想从<li>中的<ul>获取文本，你应该使用jQuery .map()函数来获取一个可以用作jQuery源代码的数组用户界面.autocomplete()。

e.g。

$(function() {
    var lst_source = $("#list");
    var lst_options = $("li", lst_source);

    $('#autocomplete').autocomplete({
        source: lst_options.map(function() {
            return $(this).text();
        }).get()
    });
});

jsFiddle test

虽然如果除了存储要用于自动完成的值之外的任何事情都不使用<ul>，请考虑将字符串直接输出为页面上的JS数组，并将其用作源。

e.g。

 <script>
 var autocompleteArray = ['option1', 'option2', 'option3']; // populate with server-side code
 </script>

 ...

 // in the javascript
 $('#autocomplete').autocomplete({source: autocompleteArray});

Answer 3

这对我有用：要包含的文件：

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

      <html>
      <head>
        <script type="text/javascript" src=""></script>
        $(function() {
            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: availableTags
            });
        });
        </script>
      </head>
      <body>


<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

  </body>
</html>

我试图在drupal 6网站中使用相同的内容，但是看不到它的工作原理。有人知道应该如何在durpal中完成它？

使用不带ajax的jquery自动完成

3 个答案: