ボタンでオートコンプリートをトリガー/コンボボックスの機能をエミュレートする

Question

私はプロジェクトでjqGridを使用していますが、編集/入力モーダルのコントロールの一部をjQueryオートコンプリートコントロールに置き換えていますが、コンボボックスのようなものが好きです。

jQueryのコンボボックスアドオンを動作させるのに苦労しているので、この機能をどのように複製することが可能でしょうか。

私のデータセットはjsonフォーマットであるので、そのまま使用することができれば涼しいでしょう。

Answer 1

これが私のオートコンプリートをコンボボックスに変えたのです。

initImpactEdit = function (elem) { 
      setTimeout(function() { 
       $(elem).autocomplete({ 
        source: function (request, response) { 
         $.ajax({ 
          url: '@Url.Action("ImpactOptions")', 
          dataType: "json", 
          data: { 
           filter: request.term 
          }, 
          success: function (data) { 
           response($.map(eval(data), function (item) { 
            return { 
             label: item.Impact_name, 
             value: item.Impact_name, 
             DTI_ID: item.DTI_ID 
            } 
           }) 
          ); 
          } 
         }) 
        } 
        } 
       }); 

      $(elem).addClass('customAutoCompleteWidth'); 

      $('<button class="customDropdown"> </button>') 
      .attr("tabIndex", -1) 
      .attr("title", "Show All Items") 
      .insertAfter(elem) 
      .button({ 
       icons: { 
        primary: "ui-icon-triangle-1-s" 
       }, 
       text: false 
      }) 
      .removeClass("ui-corner-all") 
      .addClass("ui-corner-right ui-button-icon") 
      .click(function() { 
       var widg = $(elem); 

       if (widg.autocomplete("widget").is(":visible")) { 
        widg.autocomplete("close"); 
        return; 
       } 

       if (widg.val().length == 0) { 
        // pass empty string as value to search for, displaying all results 
        widg.autocomplete("search", "*"); 
       } else { widg.autocomplete("search", widg.val()); } 
       widg.focus(); 
      }); 

      }, 100); 
     }; 

{ name: 'Impact', index: 'Impact', editoptions: { dataInit: initImpactEdit } }, 

Answer 2

あなたが探しているjQueryプラグインは、Liquid metalのアルゴリズムを実装しています。Flexselectは、目的の効果を作成するアルゴリズムです。