JQuery combobox autocomplete

Question

Нужна помощь.

Могу ли я установить пользовательское значение в поле со списком, значение которого нет в списке.

Это означает, как моя собственная ценность, которая не перечислена в списке

Вот код.

(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(); 

}); 

Если элемент не отображается в раскрывающемся списке, который ввел пользователь, элемент должен быть взят в качестве значения и должны оставаться в поле ComboBox.

Добавление поле

Answer 1

Я сделал сценарий для вас. Может быть, это сработает для вас.

<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> 

здесь скрипку ссылка http://jsfiddle.net/RDd3A/506/

Пытаясь помочь ... !!!