CODEWITHSUNDEEP
javascriptjqueryautocomplete
vikramaditya234
vikramaditya234

Reputation: 1398

Autocomplete using jquery without ajax

I regret to ask this question again. I am trying to implement autocomplete on my site. I have a list in html on the page that contains all the options.

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

In my javascript file I have created the array using the list from HTML:

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

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

With this I am trying to enable autocomplete on the text box that identified with the id= "list". I have searched much but couldnt understand the implementation so it works. I cannot employ ajax here and can only use local variable.

Please guide me through.

Upvotes: 0

Views: 4887

Answers (3)

vikramaditya234
vikramaditya234

Reputation: 1398

This worked for me: Files to be included:

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>

I am trying to use the same in a drupal 6 site, but dont see it working. Someone aware of how it should be done in durpal?

Upvotes: 0

Sujit Agarwal
Sujit Agarwal

Reputation: 12508

This is from the jqueryUi examples itself:

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

Upvotes: 6

GregL
GregL

Reputation: 38113

If you want to get the text from the <li>s in that <ul>, you should use the jQuery .map() function to get an array which you can use as the source for jQuery UI's .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.

Though if you don't use that <ul> for anything but storing the values to be used for autocomplete, consider outputting the strings straight as a JS array on your page, and using that as the source.

e.g.

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

 ...

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

Upvotes: 1

Related Questions