自動完成使用jQuery沒有AJAX

我很遺憾再次問這個問題。我正試圖在我的網站上實現自動完成功能。我在頁面上有一個包含所有選項的html列表。自動完成使用jQuery沒有AJAX

<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 =「列表」標識的文本框自動完成。我已經搜索了很多，但不能理解實施，所以它的工作原理。我不能在這裏使用ajax，只能使用局部變量。

請指導我完成。

來源

2012-03-30 vikramaditya234

如果你不知道如何編寫代碼，並且你無法通過網絡關注任何數十億個教程，你總是可以使用一個插件。 UI也有自動完成，Twitter Bootstrap;兩者都可以將數組作爲輸入。 – gpasci 2012-03-30 07:42:28

您的代碼中可能有一個類型。什麼是** loc_source **？ – 2012-03-30 08:00:14

這是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">

來源

2012-03-30 07:42:08

感謝@BenCarey編輯 – 2012-04-02 12:56:15

如果你想從<li> S上的文字在<ul>，你應該使用jQuery的.map()函數來獲取一個數組，您可以使用它作爲jQuery UI的源代碼.autocomplete()。

例如

$(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數組，並將其用作源。

例如

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

... 

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

來源

2012-03-30 07:53:07 GregL

感謝這幫助 – vikramaditya234 2012-04-02 06:17:29

@ vikramaditya234如果它解決了您的問題，一定要通過點擊勾的大綱接受它作爲答案。 – GregL 2012-04-02 06:47:54

這爲我工作：文件將包括：

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中完成？

來源

2012-04-02 06:24:03 vikramaditya234

自動完成使用jQuery沒有AJAX

回答

相關問題