Autocomplete mit jquery ohne Ajax

Ich bedauere diese Frage noch einmal zu stellen. Ich versuche Autocomplete auf meiner Website zu implementieren. Ich habe eine Liste in HTML auf der Seite, die alle Optionen enthält.Autocomplete mit jquery ohne Ajax

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

In meiner Javascript-Datei ich das Array erstellt habe, um die Liste von HTML verwenden:

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

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

Damit ich auf dem Textfeld zu ermöglichen, die automatische Vervollständigung versuchen, die mit der id = „list“ identifiziert . Ich habe viel gesucht, konnte aber die Implementierung nicht verstehen, so dass es funktioniert. Ich kann hier keinen Ajax einsetzen und kann nur lokale Variablen verwenden.

Bitte führen Sie mich durch.

Quelle

2012-03-30 vikramaditya234

Wenn Sie nicht wissen, wie man es programmiert, und Sie können keine der Milliarden Tutorials über das Netz folgen, können Sie immer ein Plugin verwenden. UI hat Autocomplete, Twitter Bootstrap auch; beide können ein Array als Eingabe nehmen. – gpasci

Sie können Ihren Code eingeben. Was ist ** loc_source **? –

Dies ist aus den jQueryUI Beispiele selbst:

// 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">

Quelle

2012-03-30 07:42:08

danke @BenCarey für die nette Bearbeitung –

Wenn Sie den Text aus den <li> s in diesem <ul> erhalten möchten, sollten Sie die jQuery .map() Funktion, um ein Array zu erhalten, das Sie als Quelle für die .autocomplete() von jQuery UI verwenden können.

z.B.

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

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

jsFiddle test.

Wenn Sie das <ul> jedoch nicht für die Speicherung der Werte verwenden, die für die automatische Vervollständigung verwendet werden sollen, sollten Sie die Zeichenfolgen als JS-Array auf Ihrer Seite ausgeben und als Quelle verwenden.

z.B.

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

... 

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

Quelle

2012-03-30 07:53:07 GregL

danke dies geholfen – vikramaditya234

@ vikramaditya234 Wenn es Ihr Problem gelöst hat, sicher sein, es als Antwort zu akzeptieren, indem Sie auf den Umriss des Ticks klicken. – GregL

Dieser arbeitete für mich: Dateien enthalten sein:

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>

Ich versuche, das gleiche in einem Drupal 6 zu verwenden Website, aber nicht funktionieren. Jemand bewusst, wie es in Durpal getan werden sollte?

Quelle

2012-04-02 06:24:03 vikramaditya234

Autocomplete mit jquery ohne Ajax

Antwort

Verwandte Themen