Erzwingen von Text zur Auswahl in jQuery Combobox

Question

Ich habe jQuery Combobox mit jQuery UI autocomplete implementiert.
Aber mein Ziel ist es, den Text zu erreichen, auf Gewalt zu wählen, ich meine, wenn wir, wie unten gezeigt werden sollte der Text Kraft sein nach dem vollständigen Text auszuwählen abgestimmt ist:

Im Folgenden wird der Code I umgesetzt habe mit jQuery Combobox. Ich brauchte dieses, weil ich in meinem Projekt verwenden möchte, wenn Benutzer es gibt, gibt das Ergebnis nicht, wenn der Benutzer Quecksilber eingibt und es zeigt, fand keinen Wert.

(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

Um Ihre erwartete Ergebnis, überprüfen Sie die genaue Wort statt übereinstimmen von unten Code

if (this.value == request.term) 
      return { 
       label: text, 
       value: text, 
       option: this 
      }; 

Codepen URL zu erreichen mit der Lösung arbeiten
http://codepen.io/nagasai/pen/Lkjyyz