jQueryコンボボックスでテキストを選択する方法

Question

jQuery UI autocompleteを使用してjQuery Comboboxを実装しました。
しかし、私の目的は、以下に示すように、我々はテキストが一致したフルテキストの後に選択するように力でなければなりません入力したときに力に選択するために、私が意味をテキストを達成することである：以下

は、私が使用して実装したコードですjQuery Comboboxユーザーが水銀を入力して値を見つけられなかった場合に結果を返さないと、ユーザーが入力したときにプロジェクトで使用したいので、これが必要でした。

(function($) { 
 
    $.widget("custom.combobox", { 
 
    _create: function() { 
 
     this.wrapper = $("<span>") 
 
     .addClass("custom-combobox") 
 
     .insertAfter(this.element); 
 

 
     this.element.hide(); 
 
     this._createAutocomplete(); 
 
     this._createShowAllButton(); 
 
    }, 
 

 
    _createAutocomplete: function() { 
 
     var selected = this.element.children(":selected"), 
 
     value = selected.val() ? selected.text() : ""; 
 

 
     this.input = $("<input>") 
 
     .appendTo(this.wrapper) 
 
     .val(value) 
 
     .attr("title", "") 
 
     .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") 
 
     .autocomplete({ 
 
      delay: 0, 
 
      minLength: 0, 
 
      source: $.proxy(this, "_source") 
 
     }) 
 
     .tooltip({ 
 
      tooltipClass: "ui-state-highlight" 
 
     }); 
 

 
     this._on(this.input, { 
 
     autocompleteselect: function(event, ui) { 
 
      ui.item.option.selected = true; 
 
      this._trigger("select", event, { 
 
      item: ui.item.option 
 
      }); 
 
     }, 
 

 
     autocompletechange: "_removeIfInvalid" 
 
     }); 
 
    }, 
 

 
    _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") 
 
     .mousedown(function() { 
 
      wasOpen = input.autocomplete("widget").is(":visible"); 
 
     }) 
 
     .click(function() { 
 
      input.focus(); 
 

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

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

 
    _source: function(request, response) { 
 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
 
     response(this.element.children("option").map(function() { 
 
     var text = $(this).text(); 
 
     if (this.value && (!request.term || matcher.test(text))) 
 
      return { 
 
      label: text, 
 
      value: text, 
 
      option: this 
 
      }; 
 
     })); 
 
    }, 
 

 
    _removeIfInvalid: function(event, ui) { 
 

 
     // Selected an item, nothing to do 
 
     if (ui.item) { 
 
     return; 
 
     } 
 

 
     // Search for a match (case-insensitive) 
 
     var value = this.input.val(), 
 
     valueLowerCase = value.toLowerCase(), 
 
     valid = false; 
 
     this.element.children("option").each(function() { 
 
     if ($(this).text().toLowerCase() === valueLowerCase) { 
 
      this.selected = valid = true; 
 
      return false; 
 
     } 
 
     }); 
 

 
     // Found a match, nothing to do 
 
     if (valid) { 
 
     return; 
 
     } 
 

 
     // Remove invalid value 
 
     this.input 
 
     .val("") 
 
     .attr("title", value + " didn't match any item") 
 
     .tooltip("open"); 
 
     this.element.val(""); 
 
     this._delay(function() { 
 
     this.input.tooltip("close").attr("title", ""); 
 
     }, 2500); 
 
     this.input.autocomplete("instance").term = ""; 
 
    }, 
 

 
    _destroy: function() { 
 
     this.wrapper.remove(); 
 
     this.element.show(); 
 
    } 
 
    }); 
 
})(jQuery); 
 

 
$(function() { 
 
    $("#combobox").combobox(); 
 
    $("#toggle").click(function() { 
 
    $("#combobox").toggle(); 
 
    }); 
 
});

.custom-combobox { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.custom-combobox-toggle { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin-left: -1px; 
 
    padding: 0; 
 
} 
 
.custom-combobox-input { 
 
    margin: 0; 
 
    padding: 5px 10px;

<title>jQuery UI Autocomplete - Combobox</title> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 

 
<div class="ui-widget"> 
 
    <label>Choose Planets</label> 
 
    <select id="combobox"> 
 
    <option value="">Select one...</option> 
 
    <option value="Mercury">Mercury</option> 
 
    <option value="Venus">Venus</option> 
 
    <option value="Earth">Earth</option> 
 
    <option value="Mars">Mars</option> 
 
    <option value="Jupiter">Jupiter</option> 
 
    </select> 
 
</div> 
 
<button id="toggle">Search</button>

Answer 1

作業溶液
http://codepen.io/nagasai/pen/Lkjyyz