• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

248
Views
jQuery UI Autocompletar: solo permitir valores seleccionados de la lista sugerida

Estoy implementando jQuery UI Autocompletar y me pregunto si hay alguna forma de permitir solo una selección de los resultados sugeridos que se devuelven en lugar de permitir que se ingrese cualquier valor en el cuadro de texto.

Estoy usando esto para un sistema de etiquetado muy parecido al que se usa en este sitio, por lo que solo quiero permitir que los usuarios seleccionen etiquetas de una lista previamente completada que se devuelve al complemento de autocompletar.

about 3 years ago · Santiago Trujillo
3 answers
Answer question

0

También podrías usar esto:

 change: function(event,ui){ $(this).val((ui.item ? ui.item.id : "")); }

El único inconveniente que he visto en esto es que incluso si el usuario ingresa el valor total de un elemento aceptable, cuando mueve el foco del campo de texto, eliminará el valor y tendrá que hacerlo nuevamente. La única forma en que podrían ingresar un valor es seleccionándolo de la lista.

No sé si eso te importa o no.

about 3 years ago · Santiago Trujillo Report

0

Tengo el mismo problema con la selección no definida. Obtuve una solución y agregué la función toLowerCase , solo para estar seguro.

 $('#' + specificInput).autocomplete({ create: function () { $(this).data('ui-autocomplete')._renderItem = function (ul, item) { $(ul).addClass('for_' + specificInput); //usefull for multiple autocomplete fields return $('<li data-id = "' + item.id + '">' + item.value + '</li>').appendTo(ul); }; }, change: function( event, ui ){ var selfInput = $(this); //stores the input field if ( !ui.item ) { var writtenItem = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val().toLowerCase()) + "$", "i"), valid = false; $('ul.for_' + specificInput).children("li").each(function() { if($(this).text().toLowerCase().match(writtenItem)) { this.selected = valid = true; selfInput.val($(this).text()); // shows the item's name from the autocomplete selfInput.next('span').text('(Existing)'); selfInput.data('id', $(this).data('id')); return false; } }); if (!valid) { selfInput.next('span').text('(New)'); selfInput.data('id', -1); } } }
about 3 years ago · Santiago Trujillo Report

0

http://jsfiddle.net/pxfunc/j3AN7/

 var validOptions = ["Bold", "Normal", "Default", "100", "200"] previousValue = ""; $('#ac').autocomplete({ autoFocus: true, source: validOptions }).keyup(function() { var isValid = false; for (i in validOptions) { if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) { isValid = true; } } if (!isValid) { this.value = previousValue } else { previousValue = this.value; } });
about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error