jQueryを使用せずにオートコンプリートして

この質問をもう一度お聞きします。私は自分のサイトにオートコンプリートを実装しようとしています。私はすべてのオプションを含むページにhtmlのリストを持っています。私は、ID =「リスト」で識別テキストボックスのオートコンプリートを有効にしようとしています。これによりjQueryを使用せずにオートコンプリートして

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

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

：私はHTMLのリストを使用してアレイを作成した私のジャバスクリプトファイルでは

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

。私は多くを検索しましたが、実装が理解できないので動作します。私はここでajaxを採用することはできず、ローカル変数のみを使用できます。

私をガイドしてください。

出典

2012-03-30 vikramaditya234

コード化する方法がわからず、ネット経由で何十億ものチュートリアルに従うことができない場合は、いつでもプラグインを使用できます。 UIにはオートコンプリート、Twitter Bootstrapもあります。両方とも入力として配列をとることができます。 – gpasci

コードに型がある可能性があります。 ** loc_source **とは何ですか？ –

これは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

nice編集のための@BenCarey –

あなたがその<ul>に<li> sからテキストを取得したい場合、あなたは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

@ vikramaditya234あなたの問題を解決した場合は、必ず目の輪郭をクリックして答えとして受け入れてください。 – GregL

これは私のために働いていた私は、Drupalの6で同じを使用しようとしています

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>

しかし、それは働いていない。どのようにそれがdurpalで行われるべきであることを知っている人ですか？

出典

2012-04-02 06:24:03 vikramaditya234

jQueryを使用せずにオートコンプリートして

答えて

関連する問題