He intentado integrar etiquetas/autocompletar para mi sitio. Está funcionando a través del texto de la opción. Estoy casi cerca del resultado, pero sigo pendiente.
Ahora, cuando intente seleccionar el texto de la opción, aparecerá el texto relacionado. Pero ahora quiero que aparezca Katmandú o la búsqueda de texto de opciones relacionadas a través del valor de la opción también.
Ej: cuando busquemos el valor a001 kathmandu aparecerá y seleccionaremos lo mismo que a002 aparecerá pokhara
$("select").select2({ tags: "true", placeholder: "Select an option", allowClear: true, width: '100%', createTag: function (params) { var term = $.trim(params.term); if (term === '') { return null; } return { id: term, text: term, value: true // add additional parameters } } }); .select2-container { max-width: 400px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> <select class="custom-select" multiple="multiple"> <option value="a001">Kathmandu</option> <option value="a002">Pokhara</option> <option value="a003">Lalitpur</option> </select>Creo que estoy cerca después de buscar a través del valor y hacer clic en él, mostrará la opción relevante con la identificación. Pero solo quiero texto de opción como pokhara kathmandu , no una identificación en el área seleccionada.
Para eliminar los duplicados de la Id y el Text que se muestra al ingresar solo la Id , verifique si el término ingresado coincide con una Id existente, y si lo hace, simplemente devuelva el Text de la opción coincidente:
options = []; // create an array of select options for a lookup $('.custom-select option').each(function(idx) { options.push({id: $(this).val(), text: $(this).text()}); }); $("select").select2({ tags: "true", placeholder: "Select an option", allowClear: true, width: '100%', createTag: function (params) { var term = $.trim(params.term); if (term === '') { return null; } // check whether the term matches an id var search = $.grep(options, function( n, i ) { return ( n.id === term || n.text === term); // check against id and text }); // if a match is found replace the term with the options' text if (search.length) term = search[0].text; else return null; // didn't match id or text value so don't add it to selection return { id: term, text: term, value: true // add additional parameters } } }); $('select').on('select2:select', function (evt) { //console.log(evt); //return false; }); .select2-container { max-width: 400px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> <select class="custom-select" multiple="multiple"> <option value="a001">Kathmandu</option> <option value="a002">Pokhara</option> <option value="a003">Lalitpur</option> </select>si busca a001 , la salida es mostrar la identificación y el texto en la salida. Aprender marcador de posición.
Si el valor es un objeto, el objeto debe ser compatible con los objetos internos de Select2. La identificación debe ser la identificación que se debe buscar al determinar si se debe mostrar el marcador de posición. El texto debe ser el marcador de posición que se mostrará cuando se seleccione esa opción.
Ejemplo: busque a001 después de ingresar mostrar kathmandu y a001 en el cuadro de texto
usando placeholder de posición en select2
placeholder: { id: "-1", text: "Select an option", } $("select").select2({ tags: "true", placeholder: { id: "-1", text: "Select an option", }, allowClear: true, width: '100%', createTag: function(params) { var term = $.trim(params.term); if (term === '') { return null; } return { id: term, text: term, value: true // add additional parameters } } }); .select2-container { max-width: 400px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <select class="custom-select" multiple="multiple"> <option value="a001">Kathmandu</option> <option value="a002">Pokhara</option> <option value="a003">Lalitpur</option> </select>