Мне нужен пример того, как закодировать автозаполнение jQuery для заполнения product_id, показывая имя_продукта, вызывающего страницу 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, как «% $ partial%»); while ($ row = mysql_fetch_row ($ result)) { array_push ($ myDataRows, $ row); } $ ret = json_encode ($ myDataRows); echo $ ret;
Я не уверен, как закодировать автозаполнение jQuery, и если мне нужно изменить remote.php
благодаря
ДОБАВЛЕНО:
Я разработал другое решение:
<script type = "text / javascript"> функция nqi_search (тип, 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 type = "text / javascript"> jQuery (document) .ready (function () { nqi_search ("product_search", "product_id", "product_name"); // также вы можете иметь много на одной странице с: nqi_search ("vendor_search", "vendor_id", "vendor_name"); }); </ Скрипт>
Есть одна проблема. он не работает, если функция nqi_search помещается в файл .js. Я не имею понятия почему?
Вот как я это делаю:
Обратите внимание: я закодировал специальную функцию, в которой json может помечать элемент как сообщение вместо этого, и таким образом вы можете помещать сообщения в список (например, я помещаю «дополнительные элементы X, которые не показаны» для длинных списков). Использовать функцию сообщения, но текст в поле метки и истинное логическое значение для поля сообщения.
Чтобы использовать это на странице, я просто
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'> " + 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"); } });