2017-02-27 30 views
0

オートコンプリートウィジェットのdocumentation for the search methodが指定されている場合、このメソッドを呼び出すボタンには利用可能な選択肢のリストが表示されます。何も起こりません。JQuery-UIのオートコンプリート検索()にDropDownListが表示されない

私は、テキストボックスのオートコンプリートウィジェットを作成し、次のコードを持っている:それは正常に動作します

$("#StateListCoolBox").autocomplete({ 
    source: StateListCoolBoxTags, 
    focus: function(event, ui) { 
     $("#StateListCoolBox").val(ui.item.label); 
     return false; 
    }, 

    select: function(event, ui) { 
     $("#StateListCoolBox").val(ui.item.label); 
     $("#StateListCoolBox-id").val(ui.item.value); 
     return false; 
    } 
}); 

を。

私はリストに表示するボタンに次のコードを付けました。呼び出されますが、何も起こりません:

function StateListCoolBox_dropDownClick() { 
    $("#StateListCoolBox").autocomplete("search", ""); 
}; 

私は対応するテキストボックスのテキストとテキストボックスを空白でテストしました。

ボタンをドロップダウンコンボのボタンのように動作させるには、クリックすると利用可能な選択肢のリストが表示されるようにするにはどうすればよいですか?

答えて

1

あなたは、このために、「ソースの表示」を見れば:http://jqueryui.com/autocomplete/#combobox

あなたが表示されます。

_createShowAllButton: function() { 
    var input = this.input, 
     wasOpen = false; 

    $("<a>") 
     .attr("tabIndex", -1) 
     .attr("title", "Show All Items") 
     .tooltip() 
     .appendTo(this.wrapper) 
     .button({ 
     icons: { 
      primary: "ui-icon-triangle-1-s" 
     }, 
     text: false 
     }) 
     .removeClass("ui-corner-all") 
     .addClass("custom-combobox-toggle ui-corner-right") 
     .on("mousedown", function() { 
     wasOpen = input.autocomplete("widget").is(":visible"); 
     }) 
     .on("click", function() { 
     input.trigger("focus"); 

     // Close if already visible 
     if (wasOpen) { 
      return; 
     } 

     // Pass empty string as value to search for, displaying all results 
     input.autocomplete("search", ""); 
     }); 
    } 

だからこれは、テキストフィールドにフォーカスイベントをトリガすることによって、すべての結果を示しています。

ボタンをドロップダウンコンボのボタンのように動作させるには、クリックすると利用可能な選択肢のリストが表示されるようにするにはどうすればよいですか?

これはあなたが達成したいことに合っていると思います。だから、minLength: 0で次のことを試してみてください。

function StateListCoolBox_dropDownClick() { 
    $("#StateListCoolBox").trigger("focus").autocomplete("search", ""); 
}; 

あなたの方法と間違って何もあってはならない、と述べたこと:

searchイベントを起動し、そのイベントがキャンセルされていない場合、データソースを呼び出します。選択ボックスのようなボタンで使用して、クリックすると候補を開くことができます。パラメータなしで呼び出されると、現在の入力値が使用されます。すべての項目を表示するには、空の文字列とminLength: 0で呼び出すことができます。

現在のコードは、単にminLength: 0が見つかりません。あなたが好きなら両方をお試しください。

関連する問題