jQuery 콤보 상자에서 텍스트를 선택하는 방법

Question

jQuery UI autocomplete을 사용하여 jQuery Combobox를 구현했습니다.
하지만 내 목표는 다음과 같이 우리는 텍스트가 일치하는 전체 텍스트 후에 선택하는 힘이 있어야합니다 입력 할 때 힘에 선택, 내 말을 텍스트를 달성하는 것입니다 : 아래

내가 사용하여 구현 한 코드입니다 jQuery 콤보 박스. 사용자가 수은을 입력하고 값을 찾지 못하면 결과를 제공하지 않을 때 프로젝트에 사용하고 싶기 때문에 필요했습니다.

(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