단추/에뮬레이션 콤보 상자 기능을 사용하여 자동 완성 트리거

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이라고 생각합니다.