jQuery Tokeninput добавить, если не существует

Question

Я нахожусь в процессе написания сценария, основанного на пользовательском вводе,

У меня есть несколько полей, для которых его значения необходимо запрашивать из базы данных,

, и если запись не найденаЯ хочу добавить новое значение, чтобы следующий пользователь нашел его с помощью автозаполнения.

Я нашел этот великолепно выглядящий и простой в реализации плагин jquery под названием TokenInput, но, похоже, он не

принимать записи, которых нет в моем запросе к базе данных.

Вот ссылка на плагин: http://loopj.com/jquery-tokeninput/demo.html

Есть ли обходной путь для этого?Или вы предлагаете другой плагин, который уже имеет эту функцию.

И я немного обеспокоен аспектом безопасности такого рода веб-сайтов, есть ли что-то особенное, о чем я должен позаботиться при выполнениитакого рода реализация?

Answer 1

Теперь это обрабатывается в последнем мастере этого плагина с использованием опции allowFreeTagging: https://github.com/loopj/jquery-tokeninput/blob/master/src/jquery.tokeninput.js#L57

Номер версии и документы не обновлялись в течение 2 лет, поэтому вам придется использовать мастер.

Answer 2

Когда вы включаете tokenInput для поля,

$(selector).tokenInput(url, ...

по этому URL-адресу tokenInput отправляет поисковые запросы.Он указывает на скрипт, который возвращает предложения на основе записей базы данных, соответствующих поисковому запросу.Вам нужно, чтобы этот скрипт добавил еще одно предложение в список для того случая, когда ничто в вашей базе данных не соответствует поисковому запросу.Как это сделать, очень сильно зависит от сценария.

Поскольку вы пометили свой вопрос php, я предполагаю, что URL указывает на скрипт php, который возвращает объект JSON, полный предложений.В этом случае измените скрипт php, добавив в список новый совет:

"{id: " . $idForThisNewSuggestion . ", name: \"" . $searchQueryString . " (new suggestion)\"}"

Answer 3

Вот мое решение с локальным JSON

$("#input").tokenInput(yourjsondata,{
    preventDuplicates: false,
    onResult: function (item) {
        if($.isEmptyObject(item)){
              return [{id:'0',name: $("tester").text()}]
        }else{
              return item
        }

    },
});

Все с идентификатором: 0 - это новая запись

Answer 4

Чтобы добавить к ответу Шона (т. Е. Вам нужно что-то на стороне сервера, чтобы фактически добавить его как новый элемент в базу данных), вы можете внести это изменение , чтобы разрешить добавление на стороне javascriptвещей.

Answer 5

 $(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 } ?>
            });

Answer 6

Я также изменил функцию onBlur, чтобы выбрать первый элемент, если они щелкают в окне поиска - он более интуитивно понятен для пользователей:

.blur(function () {
        $(this).val("");
        if ($(".token-input-selected-dropdown-item").length>0)
            add_token($(".token-input-selected-dropdown-item").data("tokeninput"));
        hide_dropdown();
    })

Answer 7

Я добавил некоторые функциональные возможности в ответ 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');
        }
    }
});

Answer 8

В файле .php, до условия while, вы можете использовать это:

array_push($yourarray, array('id'=> 0 ,'name'=> $_GET["term"]));