admin管理员组

文章数量:1384122

I regret to ask this question again. I am trying to implement autoplete 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 autoplete 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.

I regret to ask this question again. I am trying to implement autoplete 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 autoplete 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.

  • javascript
  • jquery
  • autoplete
Share Improve this question edited Mar 30, 2012 at 7:42 Andreas Wong 60.6k19 gold badges111 silver badges123 bronze badges asked Mar 30, 2012 at 7:37 vikramaditya234vikramaditya234 1,4082 gold badges21 silver badges38 bronze badges 2
  • 2 If you don't know how to code it, and you can't follow any of the billions tutorials over the net, you can always use a plugin. UI has autoplete, Twitter Bootstrap too; both can take an array as input. – gpasci Commented Mar 30, 2012 at 7:42
  • You may have a type in your code. What is loc_source? – T. Junghans Commented Mar 30, 2012 at 8:00
Add a ment  | 

3 Answers 3

Reset to default 6

This is from the jqueryUi examples itself:

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

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

HTML

<input id="countries">

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 .autoplete().

e.g.

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

    $('#autoplete').autoplete({
        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 autoplete, consider outputting the strings straight as a JS array on your page, and using that as the source.

e.g.

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

 ...

 // in the javascript
 $('#autoplete').autoplete({source: autopleteArray});

This worked for me: Files to be included:

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

http://ajax.googleapis./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" ).autoplete({
                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?

本文标签： javascriptAutocomplete using jquery without ajaxStack Overflow

版权声明：本文标题：javascript - Autocomplete using jquery without ajax - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744528546a2610890.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。