jQuery Combobox/seleccionar autocompletar?

Question

¿Existe un complemento de jQuery para reemplazar el cuadro de selección/cuadro combinado?

Probé SexyCombo, y está tan cerca de lo que quiero, pero no se completa si está escribiendo desde el medio, solo desde el principio.

Tengo 2 niveles de categorías (20 categorías de nivel superior y con subcategorías en total 120 categorías), por lo que cuando el usuario envía una entrada, debe encontrar la categoría deseada lo antes posible.

Entonces ... 2 niveles + autocompletar rellenar texto incluso si escribe letras del medio.

¿O alguna otra solución?

Answer 1

jQuery 1.8.1 tiene un ejemplo de esto en autocompletar. Es muy fácil de implementar.

Answer 2

Eche un vistazo al siguiente ejemplo de Autocompletar de jQueryUI, ya que mantiene una selección alrededor y creo que eso es lo que está buscando. Espero que esto ayude.

http://jqueryui.com/demos/autocomplete/#combobox

Answer 3

Sé que esto se ha dicho antes, pero jQuery Autocomplete va a hacer exactamente lo que necesita. Debería verificar los documentos ya que la autocompleta es muy personalizable. Si está familiarizado con javascript, entonces debería poder resolver esto. Si no, puedo darte algunos consejos, como ya lo hice una vez, pero ten cuidado de que tampoco estoy bien versado en javascript, así que ten paciencia conmigo en esto.

Creo que lo primero que debe hacer es obtener un campo de texto de autocompletar simple que funcione en su página, y luego puede personalizarlo desde allí.

El widget de autocompletar acepta datos JSON ya que es la opción 'fuente:'. Por lo tanto, debe configurar su aplicación para producir las 20 categorías de nivel superior y las subcategorías en formato JSON.

Lo siguiente que debe saber es que cuando el usuario escribe en su campo de texto, el widget de autocompletar enviará los valores escritos en un parámetro llamado "término".

Así que digamos que set-up primero su sitio para ofrecer los datos JSON desde una URL como esta:

/categories.json 

Luego, su fuente de autocompletar: opción sería la 'fuente: /categories.json'.

Cuando un usuario introduce en el campo de texto, tales como 'primera cata ...' el widget de autocompletar comenzará a enviar el valor en el parámetro 'término' como esto:

/categories.json?term=first-cata 

Esta voluntad devuelve datos JSON al widget filtrado por cualquier cosa que coincida con 'first-cata', y esto se muestra como una sugerencia de autocompletar.

No estoy seguro de lo que está programando, pero puede especificar cómo el parámetro 'término' encuentra una coincidencia. Así que puedes personalizar esto para que el término encuentre una coincidencia en el medio de una palabra si quieres. Ejemplo, si el usuario escribe 'o' su código podría hacer coincidir 'sp o ts'.

Por último, usted hizo un comentario de que desea poder seleccionar un nombre de categoría pero hacer que el widget de autocompletar envíe el ID de categoría no el nombre.

Esto se puede hacer fácilmente con un campo oculto. Esto es lo que se muestra en los documentos de autocompletado de jQuery.

Cuando un usuario selecciona una categoría, su JavaScript debería actualizar un campo oculto con la ID.

Sé que esta respuesta no es muy detallada, pero eso se debe principalmente a que no estoy seguro de lo que está programando, pero lo anterior debe apuntar en la dirección correcta. Lo que hay que saber es que puedes hacer prácticamente cualquier personalización que desees con este widget, si estás dispuesto a dedicar el tiempo para aprenderlo.

Estos son los trazos generales, pero puede look here para algunas notas que hice cuando implementé algo similar a lo que desea en una aplicación de Rails.

Espero que esto haya ayudado.

Answer 4

[Editar] La encantadora chosen jQuery plugin ha sido comprado a mi atención, parece una gran alternativa para mí.

O si solo quiere utilizar la función de autocompletado de jQuery, extendí el combobox example para admitir los valores predeterminados y eliminar la información sobre herramientas para dar lo que creo que es el comportamiento más esperado. Try it out.

(function ($) { 
    $.widget("ui.combobox", { 
     _create: function() { 
      var input, 
       that = this, 
       wasOpen = false, 
       select = this.element.hide(), 
       selected = select.children(":selected"), 
       defaultValue = selected.text() || "", 
       wrapper = this.wrapper = $("<span>") 
       .addClass("ui-combobox") 
       .insertAfter(select); 

      function removeIfInvalid(element) { 
       var value = $(element).val(), 
        matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "i"), 
        valid = false; 
       select.children("option").each(function() { 
        if ($(this).text().match(matcher)) { 
         this.selected = valid = true; 
         return false; 
        } 
       }); 

       if (!valid) { 
        // remove invalid value, as it didn't match anything 
        $(element).val(defaultValue); 
        select.val(defaultValue); 
        input.data("ui-autocomplete").term = ""; 
       } 
      } 

      input = $("<input>") 
       .appendTo(wrapper) 
       .val(defaultValue) 
       .attr("title", "") 
       .addClass("ui-state-default ui-combobox-input") 
       .width(select.width()) 
       .autocomplete({ 
        delay: 0, 
        minLength: 0, 
        autoFocus: true, 
        source: function (request, response) { 
         var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
         response(select.children("option").map(function() { 
          var text = $(this).text(); 
          if (this.value && (!request.term || matcher.test(text))) 
           return { 
            label: text.replace(
            new RegExp(
             "(?![^&;]+;)(?!<[^<>]*)(" + 
             $.ui.autocomplete.escapeRegex(request.term) + 
             ")(?![^<>]*>)(?![^&;]+;)", "gi" 
            ), "<strong>$1</strong>"), 
            value: text, 
            option: this 
           }; 
         })); 
        }, 
        select: function (event, ui) { 
         ui.item.option.selected = true; 
         that._trigger("selected", event, { 
          item: ui.item.option 
         }); 
        }, 
        change: function (event, ui) { 
         if (!ui.item) { 
          removeIfInvalid(this); 
         } 
        } 
       }) 
       .addClass("ui-widget ui-widget-content ui-corner-left"); 

      input.data("ui-autocomplete")._renderItem = function (ul, item) { 
       return $("<li>") 
        .append("<a>" + item.label + "</a>") 
        .appendTo(ul); 
      }; 

      $("<a>") 
       .attr("tabIndex", -1) 
       .appendTo(wrapper) 
       .button({ 
        icons: { 
         primary: "ui-icon-triangle-1-s" 
        }, 
        text: false 
       }) 
       .removeClass("ui-corner-all") 
       .addClass("ui-corner-right ui-combobox-toggle") 
       .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", ""); 
       }); 
     }, 

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

Answer 5

Esto funciona muy bien para mí y estoy haciendo más, escribiendo menos con el ejemplo de jQuery modificado.

Definí el objeto de selección en mi página, al igual que el jQuery ej. Tomé el texto y lo empujé a una matriz. Luego uso la matriz como fuente para mi autocompletar de entrada. tadaa.

$(function() { 
    var mySource = []; 
    $("#mySelect").children("option").map(function() { 
     mySource.push($(this).text()); 
    }); 

    $("#myInput").autocomplete({ 
     source: mySource, 
     minLength: 3 
    }); 
}