jQuery Tokeninput aggiungere se non esiste

Question

Io sono in procinto di scrivere uno script che si basa su input dell'utente,

Ho alcuni campi che i suoi valori devono essere RICHIESTO dal database,

e se non voce trovata Voglio aggiungere un nuovo valore in modo che il prossimo utente lo trovi attraverso il completamento automatico.

ho trovato questo bellissimo & facile da implementare plugin per jQuery chiamato TokenInput, ma non sembra

accetta le voci che non sono disponibili nella mia query di database.

Ecco il link per il plugin: http://loopj.com/jquery-tokeninput/demo.html

C'è una soluzione per questo? Oppure suggerisci un altro plug-in che ha già questa funzione.

E sono un po 'preoccupato per l'aspetto di sicurezza di questo tipo di siti Web. C'è qualcosa di speciale di cui ho bisogno per occuparmi di questo tipo di implementazione?

Answer 1

Quando si attiva tokenInput su un campo,

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

che url è dove tokenInput invia query di ricerca. Indica uno script che restituisce suggerimenti in base alle voci del database che corrispondono alla query di ricerca. Quello che vuoi è che lo script aggiunga un altro suggerimento alla lista per quel caso quando nulla nel tuo database corrisponde alla query di ricerca. Come farlo dipende molto dalla sceneggiatura.

Poiché hai taggato la tua domanda con php, sto indovinando l'url indica uno script php che restituisce un oggetto JSON pieno di suggerimenti. In tal caso, modificare lo script php in modo che aggiunge un nuovo suggerimento alla lista:

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

Answer 2

Per aggiungere alla risposta di Shawn (cioè è necessario lato server qualcosa da aggiungere in realtà come un nuovo elemento nel database), potresti essere in grado di creare this change per consentire l'aggiunta sul lato javascript delle cose.

Answer 3

Ho cambiato anche la funzione onBlur per selezionare il primo elemento, se si fa clic fuori dalla casella di ricerca - la sua più intuitivo per gli utenti:

.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

Ecco la mia soluzione con JSON locale

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

    }, 
}); 

Tutto con ID: 0 è una nuova voce

Answer 5

Nel file .php, prima del tempo condizione, è possibile utilizzare questo:

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

Answer 6

Questa viene ora gestita nella più recente maestro di questo plugin, utilizzando l'opzione allowFreeTagging: https://github.com/loopj/jquery-tokeninput/blob/master/src/jquery.tokeninput.js#L57

Il numero di versione e documenti non sono state aggiornate in 2 anni, quindi dovrete usare padrone.

Answer 7

Ho aggiunto alcune funzionalità alla risposta di SteveR, perché volevo che il valore comparisse nella parte superiore del menu a discesa anche se ci sono risultati. Anche onAdd se l'elemento selezionato non esiste nel databese voglio aggiungere che:

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