自动完成jQuery的dropDown

我有一个dropdownList包含我的客户的配置文件名称。自动完成jQuery的dropDown

随着客户数量的增长，我需要一个自动完成功能，以便我能够寻找具有建议的特定用户，而不是被迫在下拉列表中查找每个现有用户。

下面的代码从数据库中提取数据：

$.getJSON(
      "profiles/custoomer.aspx?callback=?", 
      {}, 
      function (data) { 
       $.each(data, function (value, name) { 
        $('<option>').attr('value', value).text(name).appendTo('#customer_profile'); 
       }); 
      } 
      );

如何添加自动填充功能？

来源

2012-07-19 user1491704

您是否尝试使用自动填充组件？这是他的文档，它很容易使用和易于定制！

http://jqueryui.com/demos/autocomplete/

来源

2012-07-19 18:56:51 PoulsQ

我无法跟随在这个例子中，我的“#tags”是什么以及什么是源 – user1491704 2012-07-19 19:06:23

在页面右侧单击“远程JSONP数据源”，然后在“查看源代码”中单击中间，然后您将看到整个示例。 – PoulsQ 2012-07-19 19:08:26

找不到这样的东西:( – user1491704 2012-07-19 19:14:18

尝试使用下面的例子不要忘记，包括Jquery最新的文件;）恩乔伊弟兄

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



<div class="demo"> 

<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input id="tags"> 
</div> 

</div><!-- End demo --> 



<div style="display: none;" class="demo-description"> 
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p> 
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p> 
</div><!-- End demo-description -->

来源

2012-07-20 12:54:52 GOK

   $(function() { 
       var availableTags = ["ribstar","major"];      
       $("#search").autocomplete({ 
        source: availableTags, 
        select: function(event, ui) 
         { 
           var $this = $(this).val(ui.item.label); 
           $('#sub_cat').children('[name="'+$this.val()+'"]').attr('selected', true); 
         } 
       }); 
       });

和HTML部分

<div class="ui-widget"><label for="tags">Search: </label><input type="text" name="search" id="search"></div> 
<select name="sub_cat" id="sub_cat"> 
    <option value="1" name="ribstar">ribstar</option> 
    <option value="2" name="major">major</option> 
</select>

来源

2013-11-14 15:50:30 user2982899

自动完成jQuery的dropDown

回答

相关问题