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

Question

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

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

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

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

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

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

Вот мое решение с местным JSON

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

    },
});

Все с id: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

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

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

Answer 8

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