php - example - autocomplete jquery select

jQuery Tokeninput add si no existe

Question

Estoy en el proceso de escribir un script que se basa en la entrada del usuario,

Tengo algunos campos que sus valores deben ser extraídos de la base de datos,

y si no se encuentra ninguna entrada, quiero agregar un nuevo valor para que el próximo usuario lo encuentre a través de autocompletar.

Encontré este plugin jquery de gran apariencia y fácil de implementar llamado TokenInput, pero no parece

aceptar entradas que no están disponibles en mi consulta de base de datos.

Aquí está el enlace para el complemento: http://loopj.com/jquery-tokeninput/demo.html

Hay una solución para esto ? O sugieres otro plugin que ya tenga esta característica.

Y estoy un poco preocupado por el aspecto de seguridad de este tipo de sitios web, ¿hay algo especial que deba tener en cuenta al realizar este tipo de implementación?

Answer 1

Agregué algunas funcionalidades a la respuesta de SteveR, porque quería que el valor apareciera en la parte superior del menú desplegable, incluso si hay resultados. También onAdd si el elemento seleccionado no existe en la base de datos, quiero agregarlo:

 $("#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 2

Aquí está mi solución con json local

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

    },
});

Todo con id: 0 es una nueva entrada.

Answer 3

Cuando habilitas tokenInput en un campo,

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

esa url es donde tokenInput envía consultas de búsqueda. Apunta a un script que devuelve sugerencias basadas en entradas de base de datos que coinciden con la consulta de búsqueda. Lo que desea es que el script agregue otra sugerencia a la lista para ese caso cuando nada en su base de datos coincida con la consulta de búsqueda. Cómo hacer esto depende mucho del guión.

Debido a que etiquetó su pregunta con php , supongo que la url apunta a un script php que devuelve un objeto JSON lleno de sugerencias. En ese caso, modifique el script php para que agregue una nueva sugerencia a la lista:

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

Answer 4

En el archivo .php, antes de la condición while, puede usar esto:

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

Answer 5

Esto ahora se maneja en el último maestro de este complemento, utilizando la opción allowFreeTagging: https://github.com/loopj/jquery-tokeninput/blob/master/src/jquery.tokeninput.js#L57

El número de versión y los documentos no se han actualizado en 2 años, por lo que tendrá que usar master.

Answer 6

Para agregar a la respuesta de Shawn (es decir, necesita algo del lado del servidor para agregarlo como un nuevo elemento en la base de datos), es posible que pueda hacer este cambio para permitir la adición en el lado de javascript de las cosas.

Answer 7

También cambié la función onBlur para seleccionar el primer elemento si hacen clic en el cuadro de búsqueda, es más intuitivo para los usuarios:

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

Answer 8

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