Wie Symbol zu Tokenfield Autocomplete-Liste hinzufügen?

Ich benutze jQuery tokenfield für Autosuggest. Ich möchte customList Symbole der Ergebnisse hinzufügen. Wie geht das.?Wie Symbol zu Tokenfield Autocomplete-Liste hinzufügen?

ich folgenden Code bin mit,

var applyAutoCompleteToken = (function(){ 
    $("input.Token").each(function(){ 
     var tokensData = []; 
     var autoSugFieldName = $(this).attr('data-name'); 
     $('.Record').each(function(index){ 
      var $ID = $('input[name="'+autoSugFieldName+'['+index+'].ID"][type="hidden"]'); 
      var $LinkID = $('input[name="'+autoSugFieldName+'['+index+'].LinkID"][type="hidden"]'); 
      var Obj = { 
        label:$ID.attr('data-name'), 
        value:JSON.stringify({ "ID":$ID.val(), "LinkID":$LinkID.val() }) 
      }; 
      tokensData.push(Obj) 
     }); 
     $(this).tokenfield({ 
      tokens : tokensData, 
      createTokensOnBlur:false, 
      allowEditing:false, 
      allowPasting:false, 
      autocomplete: { 
       minLength:2, 
       scrollHeight:20, 
       focus: function (event, ui) { 
        event.preventDefault(); 
        $(this).val(ui.item.label); 
       }, 
       source: function(query,process) { 
       unbindGlobalAjaxLoader(); 
       $(this.element).closest('div.validate').append('<i class="fa fa-spinner fa-pulse"></i>'); 
        var excludeIds ='' 
         $('.Record').each(function(index){ 
          var Id = $('input[name^="'+autoSugFieldName+'['+index+'].ID"][type="hidden"]').val(); 
          if(excludeIds == "") 
           excludeIds += Id; 
          else 
           excludeIds += "," + Id; 
         }); 
        return $.get(contextPath + constants.urls.suggest + constants.urls.params.startParams + constants.urls.params.pubName + encodeURIComponent(query.term) + constants.urls.params.queryparam + excludeIds,function(data){ 
        utils.bindGlobalAjaxLoader(); 
        $('body').find('i.fa-spinner').remove(); 
         data=JSON.parse(data) 
         var list = data.SuggDetail; 
         var customList = []; 
         $.each(list,function(key,value){ 
          if(value.ID != undefined && value.ID != ""){ 
           var Obj = { 
             label: value.Name, 
             value:JSON.stringify({ "ID":value.ID, "LinkID":value.LinkID }) 
           }; 
           customPubList.push(Obj); 
          } 
         }); 
         return process(customList); 
        }).fail(function() { 
         $('body').find('i.fa-spinner').remove(); 
        }); 
       }, 

       // source: customList, 
       delay: 100 
      }, 
      showAutocompleteOnFocus: false 
     }).on('tokenfield:createtoken',function(e){ 
      var $input = $(e.target); 
      try{ 
       $.parseJSON(e.attrs.value) 
      }catch(e){ 
       return false; 
      } 
     }) 
     //Remove hidden fields on editing the token 
     .on('tokenfield:createdtoken',function(e){ 
      var fieldName = $(this).attr('data-name'); 
      var $inputAct = $(this); 
      var tokens = $(this).tokenfield('getTokens'); 
      createdTokenUtility(fieldName, $inputAct, tokens); 
     }) 
     //Remove hidden fields on editing the token 
     .on('tokenfield:removedtoken',function(){ 
      var fieldName = $(this).attr('data-name'); 
      var $inputAct = $(this); 
      var tokens = $(this).tokenfield('getTokens'); 
      createdTokenUtility(fieldName, $inputAct, tokens); 
     }); 
    }); 
});

Ich bin mit jQuery UI und Bootstrap tokenfield JavaScript-Bibliothek für sie.

Ich habe versucht, label: value.Name +  im Code hinzuzufügen, aber es gibt kein korrektes Ergebnis. Auf UI, während die Liste der Suche auffüllt wie dies mit HTML-Tag als Text,

 First Name A
 First Name B
 First Name C

Aber nachdem Sie aus der Liste das Token-Feld auswählen wird es richtig in Eingabe Feldsymbol mit Namen, dh ohne HTML-Tag als Text.

Quelle

2017-06-28 Rajeev

Ich habe die Lösung mit Google herausgefunden. Es funktionierte für mich, nachdem ich create property nach delay: 100 mit diesem Code,

create: function() { 
        $(this).data('ui-autocomplete')._renderItem = function (ul, item) { 
        var html = JSON.parse(item.value).LinkID != undefined && JSON.parse(item.value).LinkID != "" ? "<i class='fa fa-history'></i>" : ""; 
         return $('<li>') 
           .append(html + item.label) 
           .appendTo(ul); 
        }; 
       }

hinzugefügt

Quelle

2017-06-28 11:15:43 Rajeev

Wie Symbol zu Tokenfield Autocomplete-Liste hinzufügen?

Antwort

Verwandte Themen