¿Cómo se establece un valor predeterminado con jquery autocompletar combobox?

Question

Al usar the jquery ui autocompletecombobox, ¿puede establecer un valor predeterminado para el cuadro combinado?

Answer 1

Intenté responder a esta en la forma en que lo haría en mi propio proyecto.

Leo el código fuente de la página que ha publicado. En el código jquery que genera el combobox autocompletar, agregué una línea de código que procesa cuando se crea el cuadro combinado que lee el valor seleccionado de su elemento "seleccionar". De esta manera se puede establecer mediante programación el valor por defecto (como lo haría normalmente si usted no estaba usando el desplegable de autocompletar)

Aquí está la línea de uno añadí:

input.val($("#combobox option:selected").text()); 

Así de simple. Establece el valor de entrada para el valor de texto del elemento seleccionado de #combobox. Naturalmente, querrás actualizar los elementos de id para que coincidan con tu proyecto o página individual.

Aquí está en contexto:

(function($) { 
    $.widget("ui.combobox", { 
     _create: function() { 
      var self = this; 
      var select = this.element.hide(); 
      var input = $("<input>") 
       .insertAfter(select) 
       .autocomplete({ 
        source: function(request, response) { 
         var matcher = new RegExp(request.term, "i"); 
         response(select.children("option").map(function() { 
          var text = $(this).text(); 
          if (this.value && (!request.term || matcher.test(text))) 
           return { 
            id: this.value, 
            label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), 
            value: text 
           }; 
         })); 
        }, 
        delay: 0, 
        change: function(event, ui) { 
         if (!ui.item) { 
          // remove invalid value, as it didn't match anything 
          $(this).val(""); 
          return false; 
         } 
         select.val(ui.item.id); 
         self._trigger("selected", event, { 
          item: select.find("[value='" + ui.item.id + "']") 
         }); 

        }, 
        minLength: 0 
       }) 
       .addClass("ui-widget ui-widget-content ui-corner-left"); 



      // This line added to set default value of the combobox 
      input.val($("#combobox option:selected").text()); 





      $("<button>&nbsp;</button>") 
      .attr("tabIndex", -1) 
      .attr("title", "Show All Items") 
      .insertAfter(input) 
      .button({ 
       icons: { 
        primary: "ui-icon-triangle-1-s" 
       }, 
       text: false 
      }).removeClass("ui-corner-all") 
      .addClass("ui-corner-right ui-button-icon") 
      .click(function() { 
       // close if already visible 
       if (input.autocomplete("widget").is(":visible")) { 
        input.autocomplete("close"); 
        return; 
       } 
       // pass empty string as value to search for, displaying all results 
       input.autocomplete("search", ""); 
       input.focus(); 
      }); 
     } 
    }); 

})(jQuery); 

Answer 2

function setAutoCompleteCombo(id,value,display) { 
    if($(id+"[value="+value+"]").text().localeCompare("")==0){ 
     $("<option value='"+value+"'>"+display+"</option>").appendTo($(id)); 
    } 
    $(id).val(value); 
    $(id).next().val($(id+" :selected").text()); 
} 

Lo resolví llamando a esta función en la página inicial o en el tiempo de ejecución. Ejemplo:

setAutoCompleteCombo('#frmData select#select_id',option_value,option_text); 

Answer 3

Llame al método option para fijar el valor de la caja después de haber inicializado.

$('#combo').autocomplete("option" , optionName , [value]) 

Answer 4

puede ser esto le ayudará a

http://forum.jquery.com/topic/autocomplete-default-value

Answer 5

respuesta # 1 está muy cerca, pero no se puede difícil que el código de identificación del elemento si se quiere mantener la función genérica. ¡Añade esta línea y disfruta!

input.val(jQuery("#"+select.attr("id")+" :selected").text()); 

Answer 6

he pellizcado las respuestas aquí para utilizar el selecto variables ya definidas por el cuadro combinado para encontrar la opción seleccionada y usar eso. Esto significa que es genérico para cada elemento en el que haya definido el cuadro combinado (usando id, clase o selector) y también funcionará para múltiples elementos.

input.val(select.find("option:selected").text()); 

Espero que esto ayude a alguien!

Answer 7

input.val($(select).children("option:selected").text()); 

Answer 8

Basado en Mathieu Steele answer, en lugar de utilizar esto:

input.val($("#combobox option:selected").text()); 

utilizo este:

input.val($(select).find("option:selected").text()); 

Widget es ahora reutilizable y DRY :)

Answer 9

método añadir a jquery combobox script

setValue: function(o) {    
    $(this.element).val(o); 
    $(this.input).val($(this.element).find("option:selected").text());    
} 

Answer 10

Esto se puede conseguir mediante la edición de la siguiente declaración de la auto-completer:

value = selected.val() ? selected.text() : "Select Institution"; 

Answer 11

que utiliza la línea de abajo del código en su lugar, sólo otra manera de lograr el mismo resultado :)

$('option:selected', this.element).text() 

Answer 12

Tengo una respuesta que funcionó para mi implementación del cuadro combinado de la interfaz de usuario de jquery. En algún lugar en medio del código era la siguiente:

.val(value) 

lo cambié a:

.val(select.val()) 

y listo, el valor inicial de la caja de texto subyacente apareció. Me parece que esta debería ser la funcionalidad predeterminada, pero ¿qué sé?

Answer 13

Añadir a continuación una línea de código antes de la línea "this._on(this.input, {"

this.input[0].defaultValue = value; 

después de crear el código en el cuadro combinado original autocompletar. También puede restablecer con el botón de reinicio de html.

Answer 14

Perdí este error y no puedo arreglar el evento OnLoad sea lo que sea que codifiqué (Probablemente en 3 horas). Finalmente por suerte cruzé la página web http://www.onemoretake.com/2011/04/17/a-better-jquery-ui-combo-box/ (Thx para @Dan para resolver mi dolor de cabeza) y vi que la parte que faltaba realmente no estaba en "OnLoad", en la función de definición de ui. La función de definición Standart en la página web oficial de Jquery Ui no contiene la opción de selección mediante programación.

Aquí es la función debe agregado a la función de definición:

//allows programmatic selection of combo using the option value 
     setValue: function (value) { 
      var $input = this.input; 
      $("option", this.element).each(function() { 
       if ($(this).val() == value) { 
        this.selected = true; 
        $input.val(this.text); 
        return false; 
       } 
      }); 
     } 

también produje otra función para cambiar la selección a través de texto opción no valor de la opción

//allows programmatic selection of combo using the option text 
      setValueText: function (valueText) { 
       var $input = this.input; 
       var selectedText;     
       $("option", this.element).each(function() { 
        if ($(this).text() == valueText) { 
         this.selected = true; 
         $input.val(this.text);              
         return false; 
        } 
       });       
      } 

Puede utilizar estas funciones en OnLoad o otra función como:

$("#yourComboBoxID").combobox("setValue", "Your Option Value"); 

o

$("#yourComboBoxID").combobox("setValueText", "Your Option Text");