Я в процессе написания сценария, который основывается на пользовательском вводе,
У меня есть несколько полей, которые необходимо загрузить из базы данных,
и если ни одна запись не найдена, я хочу добавить новое значение, чтобы следующий пользователь нашел его через автозаполнение.
Я нашел этот замечательный и простой в использовании плагин jquery под названием TokenInput, но он не кажется
принимать записи, которые недоступны в запросе моей базы данных.
Вот ссылка для плагина: http://loopj.com/jquery-tokeninput/demo.html
Есть ли обходной путь для этого? Или вы предлагаете другой плагин, который уже имеет эту функцию.
И я немного обеспокоен аспектом безопасности такого рода веб-сайтов, есть ли что-то особенное, о чем я должен заботиться, когда занимаюсь такой реализацией?
Когда вы активируете tokenInput в поле,
$(selector).tokenInput(url, ... что url – это то, где tokenInput отправляет поисковые запросы. Он указывает на скрипт, который возвращает предложения на основе записей базы данных, соответствующих поисковому запросу. Вы хотите, чтобы этот скрипт добавлял еще одно предложение в список для этого случая, когда ничто в вашей базе данных не соответствует поисковому запросу. Как это сделать, многое зависит от сценария.
Поскольку вы отметили свой вопрос с помощью php , я предполагаю, что URL-адрес указывает на php-скрипт, который возвращает объект JSON, полный предложений. В этом случае измените скрипт php так, чтобы он добавил новое предложение в список:
"{id: " . $idForThisNewSuggestion . ", name: \"" . $searchQueryString . " (new suggestion)\"}"
Теперь это обрабатывается последним мастером этого плагина, используя параметр allowFreeTagging: https://github.com/loopj/jquery-tokeninput/blob/master/src/jquery.tokeninput.js#L57
Номер версии и документы не обновлены через 2 года, поэтому вам придется использовать мастер.
Вот мое решение с локальным json
$("#input").tokenInput(yourjsondata,{ preventDuplicates: false, onResult: function (item) { if($.isEmptyObject(item)){ return [{id:'0',name: $("tester").text()}] }else{ return item } }, });
Все с id: 0 – новая запись
Чтобы добавить к ответу Шона (т. Е. Вам нужно что-то серверное, чтобы фактически добавить его в качестве нового элемента в базе данных), вы можете внести это изменение, чтобы добавить дополнение на стороне JavaScript.
Я также изменил функцию onBlur, чтобы выбрать первый элемент, если он щелкнет окно поиска – более интуитивно понятным для пользователей:
.blur(function () { $(this).val(""); if ($(".token-input-selected-dropdown-item").length>0) add_token($(".token-input-selected-dropdown-item").data("tokeninput")); hide_dropdown(); })
$(document).ready(function() { $("#expert").tokenInput("source.php", { theme: "facebook", noResultsText:'Skill Not Found - Enter to Add', queryParam:'q', onResult: function (item) { if($.isEmptyObject(item)){ return [{id:$("#token-input-expert").val(),name: $("#token-input-expert").val()+'*'}] }else{ return item } }, preventDuplicates:true<?php if($expert_rank_json){?>, prePopulate: <?php echo $expert_rank_json ?> <?php } ?> });
Я добавил некоторые функции для ответа SteveR, потому что я хотел, чтобы значение отображалось в верхней части раскрывающегося списка, даже если есть результаты. Также onAdd, если выбранный элемент не существует в базе данных, я хочу добавить его:
$("#my_input").tokenInput(my_results_route), { hintText: "Select labels", noResultsText: "No results", searchingText: "Searching...", preventDuplicates: true, onResult: function(item) { if($.isEmptyObject(item)){ return [{id:'0', name: $("tester").text()}]; } else { //add the item at the top of the dropdown item.unshift({id:'0', name: $("tester").text()}); return item; } }, onAdd: function(item) { //add the new label into the database if(!parseInt(item.id)) { //database insertion ajax call console.log('Add to database'); } } });
В файле .php перед условием while вы можете использовать это:
array_push($yourarray, array('id'=> 0 ,'name'=> $_GET["term"]));