3

顧客のプロファイル名を含むドロップダウンリストがあります。

顧客の数が増えるにつれて、オートコンプリート機能が必要になります。これにより、ドロップダウンリストで既存のすべてのユーザーを探す必要がなく、提案のある特定のユーザーを探すことができます。

次のコードは、データベースからデータをフェッチします。

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

オートコンプリート機能を追加するにはどうすればよいですか？

4

3 に答える 3

1

オートコンプリートコンポーネントを使用しようとしましたか？これが彼のドキュメントです。使いやすく、カスタマイズも簡単です。

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

于 2012-07-19T18:56:51.413 に答える
0

以下の例を使用してみて、Jqueryの最新ファイルを含めることを忘れないでください;）Njoy Bro

<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-20T12:54:52.250 に答える
0 
              $(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-14T15:50:30.560 に答える