Tengo el siguiente javascript que se autocompleta en función del nombre para mostrar de los usuarios. El problema es que el campo de entrada de autocompletar es el nombre para mostrar. Cada usuario en realidad tiene una identificación de usuario, pero quiero buscar al usuario en la función de autocompletar según el nombre para mostrar, pero cuando envío el formulario, quiero enviar la identificación de usuario.
<script> $(document).ready(function() { $("input#autocomplete").autocomplete({ source: [ "John Doe", "Another User", ] }); }); </script> <input id="autocomplete" name="autocomplete"/>¿Alguien puede sugerir cómo puedo hacer esto? Idealmente, en la fuente, ¿hay alguna manera de tener la ID de usuario como valor también y de alguna manera enviar la ID de usuario pero con el nombre para mostrar?
en lugar de usar solo una matriz, puede usar un objeto dentro de la matriz para que aún pueda buscar el nombre para mostrar coincidente y devolver la identificación del usuario
en vez de:
source: [ "John Doe", "Another User", ]tu puedes hacer:
var sourceValues = [ {label: "John Doe", value: 1}, {label: "Another User", value: 2}, ] $("#autocomplete").autocomplete({ source: sourceValues.map(lang=>lang.label), });Considere el siguiente ejemplo.
$(function() { $("#user_name").autocomplete({ source: [{ label: "John Doe", value: 1001 }, { label: "Jonny Appleseed", value: 1002 },{ label: "Jane Doe", value: 1003 }], select: function(e, ui) { $("#user_name").val(ui.item.label); $("#user_id").val(ui.item.value); return false; } }); }); <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <div>Name: <input id="user_name" /></div> <div>ID: <input type="text" id="user_id" /></div>Esto se basa en este ejemplo: https://jqueryui.com/autocomplete/#custom-data
Si define una fuente más compleja, puede utilizarla en la devolución de llamada select . ui.item representa el objeto seleccionado. Tiene una label y un value que puedes poner en varios campos.