combobox.ui jquery啓動焦點自動完成

Question

我正在工作combox.ui，這是由我的一個高級更改之前。他根據我們項目的需要更改了js文件。但是現在我的需要是現在每當有人關注下拉列表時 - 選擇 - 應該從列表中刪除，自動完成搜索應該開始，並且每當焦點不在下拉或輸入時 - 選擇 - 應該被添加到它的位置。請告訴我我在哪裏做錯了，這個函數應該寫在哪裏。我不知道在哪裏寫這個函數在這個插件代碼..

(function ($) { 
$.widget("ui.combobox", { 
    options: { 
     maxOptionSize: 20, 
     maxOptionText: "... type to filter" 
    }, 
    _create: function() { 
     var self = this, 
      select = this.element.hide(), 
      selected = select.children(":selected"), 
      maxOptionValue = select.children().eq(0).val(), 
      value = selected.val() ? selected.text() : ""; 

     select.wrap("<div style='float:left;'></div>"); 

     var width = $(select).width(); 
     if (width == 0) 
      width = 100; 

     if (this.element.attr('disabled') == 'disabled') {/*To handle disabled case */ 
      input = this.input = $("<input type='textbox'>").addClass("textbox").attr("disabled", "disabled").insertAfter(select).val(value).attr("title", value); 
      return; /*Do not render autocomplete*/ 
     } 
     var input = this.input = $("<input>").insertAfter(select).val(value).attr("title", value).autocomplete({ 
      delay: 0, 
      minLength: 0, 
      source: function (request, response) { 
       var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
       var select_el = select.get(0); // get dom element 
       var rep = new Array(); // response array 
       input.data("autocomplete").showMaxOption = false; 
       // simple loop for the options 
       for (var i = 0; i < select_el.length; i++) { 
        var text = select_el.options[i].text; 
        // add element to result array 
        if (select_el.options[i].value && (!request.term || matcher.test(text))) { 
         rep.push({ 
          label: text, //.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), 
          value: text, 
          option: select_el.options[i], 
          number: i + 1 
         }); 
        } 
        if (rep.length == self.options.maxOptionSize) { 
         input.data("autocomplete").showMaxOption = true; 
         input.data("autocomplete").maxOptionText = self.options.maxOptionText; 
         break; 
        } 
       } 
       // send response 
       response(rep); 
      }, 
      select: function (event, ui) { 

       if (ui.item.value == maxOptionValue) { 
        input.data("autocomplete").term = ""; 
        var selValue = select.find("option:selected").text(); 
        $(this).val(selValue).attr("title", selValue); 

        return false; 
       } else { 
        ui.item.option.selected = true; 
        self._trigger("selected", event, { 
         item: ui.item.option 
        }); 
       } 
      }, 
      focus: function (event, ui) { 

       if (ui.item.value == maxOptionValue) { 
        return false; 
       } 
      }, 
      change: function (event, ui) { 

       if (!ui.item) { 
        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"), 
         valid = false; 
        select.children("option").each(function() { 
         if ($(this).text().match(matcher)) { 
          this.selected = valid = true; 
          select.change(); 
          return false; 
         } 
        }); 
        if (!valid) { 
         input.data("autocomplete").term = ""; 
         var selValue = select.find("option:selected").text(); 
         $(this).val(selValue).attr("title", selValue); 
         return false; 
        } 
       } else { 
        var selValue = select.find("option:selected").text(); 
        $(this).attr("title", selValue); 
       } 
      }, 
      close: function (event, ui) { 
       if (event.originalEvent && event.originalEvent.type === "menuselected") { 
        $(select).change(); 
       } 
      } 
     }).addClass("ui-widget ui-widget-content ui-corner-left").width(width); 

     input.data("autocomplete")._renderItem = function (ul, item) { 
      return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul); 
     }; 

     this.button = $("<button type='button'>&nbsp;</button>").attr("tabIndex", -1).attr("title", "Show Items").insertAfter(input).button({ 
      icons: { 
       primary: "ui-icon-triangle-1-s" 
      }, 
      text: false 
     }).removeClass("ui-corner-all").addClass("ui-corner-right ui-button-icon").click(function() { 
      // close if already visible     
      if (input.autocomplete("widget").is(":visible")) { 
       input.autocomplete("close"); 
       return; 
      } 

      // work around a bug (likely same cause as #5265) 
      $(this).blur(); 

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

     var iw = input.outerWidth(true); 
     var bw = this.button.outerWidth(true); 
     select.parent().width(iw + bw + 1); 
    }, 
    destroy: function() { 
     this.input.remove(); 
     this.button.remove(); 
     this.element.show(); 
     $.Widget.prototype.destroy.call(this); 
    } 
}); 
})(jQuery); 
(function ($) { 
$.extend($.ui.autocomplete.prototype, { 
    _renderMenu: function (ul, items) { 
     var self = this; 
     $.each(items, function (index, item) { 
      if (index < items.length) 
       self._renderItem(ul, item); 
     }); 
     if (self.element.data("autocomplete").showMaxOption) { 
      ul.append("<li class='ui-autocomplete-max-option'>" +  self.element.data("autocomplete").maxOptionText + "</li>"); 
     } 
    } 
}); 
})(jQuery); 

Answer 1

我覺得這是你問的是什麼， - 選擇 - 焦點被刪除，並加了回去模糊。

http://jsfiddle.net/nickaknudson/fsRn4/

UPDATE：焦點

顯示搜索，並增加 - 選擇 - 僅如果沒有選擇另一種選擇。

http://jsfiddle.net/nickaknudson/fsRn4/4/

資源：

• http://jqueryui.com/demos/autocomplete/combobox.html
• https://stackoverflow.com/a/11859219/922168

Answer 2

剛剛輸入的聚焦狀態中添加$(input).autocomplete('search','');（）事件，這將打開組合框每當輸入關注焦點。因此，基於尼克的小提琴，它會像input.focus(function(event) { $(this).val(''); $(input).autocomplete('search',''); });

這裏的工作示例：http://jsfiddle.net/fsRn4/3/