Jquery Combobox Autocomplete

Question

Benötigen Sie Hilfe.

Kann ich den benutzerdefinierten Wert auf die Combobox setzen, den Wert, der nicht in der Liste vorhanden ist.

Es bedeutet, wie mein eigener Wert, der nicht

Hier in der Liste aufgeführt wird, ist der Code.

(function($) { 
    $.widget("ui.combobox", { 
     _create: function() { 
     this.wrapper = $("<span>") 
      .addClass("custom-combobox") 
      .insertAfter(this.element) 
      .attr('id', this.element[0].id+"_combobox"); 

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

     _createAutocomplete: function() { 

      var selected = this.element.children(":selected"); 
      this.input = $("<input>") 
      .appendTo(this.wrapper) 
      .attr("title", '<fmt:message key="page.claim.personalclaimnotification.injury.select_info" />') 
      .val(selected.text()) 
      .css({ 
       color: function(index, value) { 
        if (this.value == '<fmt:message key="page.claim.search.object.name" />') { 
         return "#777"; 
        } 
       }, 
       fontStyle: function(index, value) { 
        if (this.value == '<fmt:message key="page.claim.search.object.name" />') { 
         return "italic"; 
        } 
       }, 
       width: "286px" 
      }) 
      .attr("maxlength", 256) 
      .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") 
      .autocomplete({ 
       delay: 0, 
       minLength: 3, 
       source: $.proxy(this, "_source") 
      }) 

      // executes when user selects illness from list 
      this._on(this.input, { 
      autocompleteselect: function(event, ui) { 
       ui.item.option.selected = true; 
       this._trigger("select", event, { 
       item: ui.item.option 
       }); 
      }, 
      autocompletechange: "_addIfInvalid" 

      }); 

     }, /* _createAutocomplete close */ 

      _createShowAllButton: function() { 
      var input = this.input, 
      wasOpen = false; 

      $("<a>") 
      .attr("tabIndex", -1) 
      .appendTo(this.wrapper) 
      .attr("title", '<fmt:message key="page.claim.personalclaimnotification.injury.select_info" />') 
      .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() { 

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

       // Pass triple spaces as value to search for, displaying all results (each has triple spaces at the end) 
       input.autocomplete("search", " "); 
      }); 
     },  /* _createShowAllButton close */ 

     _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 
       }; 
      })); 
     }, 


     _addIfInvalid: 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; 
      } 

      alert("value "+ value +" this.element "+ this.element[0].id); 

      // Remove invalid value 
      this.input 
       .val(value) 
       .attr("title", value + " didn't match any item") 
       .tooltip("open"); 
      //this.element.val(value); 
      //this.input.val(value); 
      $('select').val(value); 

      this._delay(function() { 
       this.input.tooltip("close").attr("title", ""); 
      }, 2500); 
      this.input.autocomplete("instance").term = ""; 
      }, 

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

     });  /* widget close */ 
    })(jQuery); /* function close */ 


$(function() { 
    $(".objectComboBox").combobox(); 

}); 

Wenn das Element nach unten in der Drop nicht aufgeführt ist, dass Benutzer eingegebene Element als Wert genommen werden sollte und in dem Combobox Feld bleiben.

Hinzufügen des Feldes

Answer 1

ich für Sie ein Skript gemacht. Vielleicht funktioniert es für dich.

<select id="combobox" > 
    <option>abc</option> 
    <option>deg</option> 
    <option>gcc</option> 
    </select> 

    <input type="text" id="addfieldtoddl" /><input type="button" value="add" id="add" onclick="addfieldtoddl()" /> 

    <script> 
     $(document).ready(function(){ 
      $("#combobox").combobox(); 
     }); 
     function addfieldtoddl() { 
      var YourValue = $("#addfieldtoddl").val(); 
      $('#combobox').append('<option val="'+ YourValue +'">'+ YourValue +'</option>'); 
      $("#combobox").combobox(); 
     } 
    </script> 

hier Geige Link http://jsfiddle.net/RDd3A/506/

Der Versuch ... zu helfen !!!