jQuery Tokeninput añadir, si no existe

Question

estoy en el proceso de escribir un guión que se basa en la entrada del usuario,

tengo algunos campos que necesitan ser quired de la base de sus valores,

y si no hay entrada encontrada Quiero agregar un nuevo valor para que el siguiente usuario lo encuentre a través de autocompletar.

me encontré con este gran apariencia & fácil de implementar plugin de jQuery llamado TokenInput, pero no parece que

aceptar entradas que no están disponibles en mi consulta a la base. no http://loopj.com/jquery-tokeninput/demo.html

es una solución para esto:

Aquí está el enlace para el plugin? ¿O sugiere otro complemento 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 debo tener en cuenta al hacer este tipo de implementación?

Answer 1

Al habilitar tokenInput en un campo,

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

que url es donde tokenInput envía consultas de búsqueda. Apunta a un script que devuelve sugerencias basadas en las entradas de la base de datos que coinciden con la consulta de búsqueda. Lo que quiere es que esa secuencia de comandos 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.

Como 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, modificar el script php para que se añade un nueva sugerencia de la lista:

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

Answer 2

Para añadir a la respuesta de Shawn (es decir, que necesita del lado del servidor algo que añadir en realidad como un nuevo elemento de la base de datos), es posible que pueda hacer this change para permitir la adición en el lado de Javascript de las cosas.

Answer 3

También ha cambiado la función onBlur para seleccionar el primer elemento si hacen clic en la casilla 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 4

aquí está mi solución con JSON locales

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

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

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

Answer 6

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

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

Answer 7

He agregado algunas funcionalidades a la respuesta de SteveR, porque quería que el valor aparezca en la parte superior del menú desplegable, incluso si hay resultados. También onAdd si el artículo seleccionado no existe en el databese Quiero añadir que:

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

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