自動完成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

回答

相關問題