php - bootstrap - Necesito un ejemplo de jQuery Autocompletar que devuelva la identificación y el nombre con ajax

autocomplete bootstrap

Question

Necesito un ejemplo de cómo codificar un autocompletado de jQuery para poblar product_id mientras se muestra el nombre del producto llamando a una página de Ajax "remote.php"

<input name="product_name" id="product_name" type="text" value="" /> <input name="product_id" id="product_id" type="hidden" value="" /> remote.php: $partial = addslashes($_POST[''partial_search'']); $myDataRows = array(); $result = mysql_query ("SELECT product_id, product_name FROM products WHERE product_name like "%$partial%"); while ($row = mysql_fetch_row($result)) { array_push($myDataRows, $row); } $ret = json_encode ($myDataRows); echo $ret;

No estoy seguro de cómo codificar el autocompletado de jQuery y si necesito cambiar remote.php

Gracias

AGREGADO MÁS TARDE:

Encontré otra solución:

<script type="text/javascript"> function nqi_search (type, id_name, text_name) { $( "#"+text_name ).autocomplete({ source: "remote.php?&t="+type, minLength: 1, select: function( event, ui ) { $( "#"+id_name ).val(ui.item.id ); } }); } </script> <script type="text/javascript"> jQuery(document).ready(function() { nqi_search ("product_search", "product_id", "product_name"); // also you can have many on one page with: nqi_search ("vendor_search", "vendor_id", "vendor_name"); }); </script>

Hay un problema. no parece funcionar si la función nqi_search se coloca en un archivo .js. ¿No tengo ni idea de porqué?

Answer 1

Así es como lo hago:

Tenga en cuenta que he codificado una función especial donde el json puede marcar un elemento como un mensaje en su lugar y de esta manera puede poner mensajes en la lista (por ejemplo, puse una "adición X elementos no mostrados" para listas largas). Para usar la función de mensaje, pero el texto en el campo de etiqueta y un booleano verdadero para el campo de mensaje.

Para usar esto en la página solo tengo

setupAutocomplete(<id of textbox>,<path to service>);

 $.ajaxSetup({
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{}",
dataFilter: function(data) {
var msg;
if (typeof (JSON) !== ''undefined'' && typeof (JSON.parse) === ''function'')
msg = JSON.parse(data);
else
msg = eval(''('' + data + '')'');
if (msg.hasOwnProperty(''d''))
return msg.d;
else
return msg;
},
error: function(msg) {
$(''#error'').html(msg.responseText)
}
});
// remove this to get rid of custom message handling
$.widget("custom.redcomplete", $.ui.autocomplete, {
_renderMenu: function(ul, items) {
var self = this;
$.each(items, function(index, item) {
if (item.message)
ul.append("<li class=''ui-menu-item special-red''>&nbsp;" + item.label + "</li>");
else
self._renderItem(ul, item)
});
}
function setupAutocomplete(inID, inURL) {
var myTB = $("[id$=''_" + inID + "'']");
// change redcomplete to autocomplete to get rid of message handling
myTB.redcomplete({
source: function(request, response) {
$.ajax({
url: inURL,
data: "{''filter'': ''" + request.term + "''}",
success: function(data) {
response($.map(data, function(item) {
return {
label: item.text,
value: item.id,
// remove this line and the , above to get rid of message handling
message: item.message
};
}));
}
})
},
delay: 500,
minLength: 3,
focus: function(event, ui) {
myTB.val(ui.item.label);
return false;
},
select: function(event, ui) {
// action for the select here.
return false;
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});