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

Я пишу script, который основывается на вводе пользователя,

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

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

Я нашел этот замечательный и простой в использовании плагин jquery под названием TokenInput, но он не выглядит

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

Здесь ссылка для плагина: http://loopj.com/jquery-tokeninput/demo.html

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

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

Ответ 1

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

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

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

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

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

Ответ 2

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

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

Ответ 3

Здесь мое решение с локальным json

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

    },
});

Все с id: 0 - новая запись

Ответ 4

Чтобы добавить к Shawn ответ (т.е. вам нужно что-то серверное, чтобы фактически добавить его как новый элемент в базе данных), вы могли бы сделать this изменить, чтобы добавить дополнение к стороне JavaScript.

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

Я добавил некоторые функции в ответ SteveR, потому что я хотел, чтобы значение отображалось в верхней части раскрывающегося списка, даже если есть результаты. Также onAdd, если выбранный элемент не существует в databese, я хочу его добавить:

 $("#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');
        }
    }
});