2016-07-19 71 views
7

UPDATEfunzione di completamento automatico personalizzato in jQuery

Con l'aiuto e suggerimenti tratti dalla @Ziv Weissman e @Fribu I ri-scritto tutta la funzione di completamento automatico.

Se qualcuno ne ha bisogno, può scaricare da here.

Grazie comunità StackOverFlow.


Sto creando una funzione di completamento automatico jQuery. La funzione che ho creato funziona perfettamente con una singola casella di testo. Ma non appena lo sto implementando su un'altra casella di testo nella stessa pagina si sta comportando in modo imprevisto. Apre e chiude l'elenco di completamento automatico.

Ecco il mio codice per autofill.js:

function setUl(result) { 
    var $ul = $('<ul>'); 
    if (result !== undefined) { 
     $.each(result, function (k, v) { 
      $ul.append('<li data-value="' + v.value + '">' + v.label + '</li>'); 
     }); 
    } 
    return $ul; 
} 
$.fn.autofill = function (options) { 
    if (options == undefined) { 
     options = {}; 
    } 
    var $currentInput = $(this); 
    var autoCompleteData = $currentInput.data('autofill'); 
    var listId='autofill-' + (new Date().getTime()).toString(16); 
    $currentInput.on('keyup focus', function (e) { 

     var query = $(this).val(); 
     var result = $.grep(autoCompleteData, function (v) { 
      return v.label.search(new RegExp(query, 'i')) !== -1; 
     }); 
     $ul = setUl(result, $currentInput); 
     $ul.attr('id', listId); 
     $ul.addClass('autofill-show'); 
     $ul.attr('data-target',$currentInput.attr('id')); 
     var position = $currentInput.position(); 
     $ul.css({ 
      width: $currentInput.width() + parseInt($currentInput.css('padding-left'), 10) + parseInt($currentInput.css('padding-right'), 10), 
      position: 'absolute', 
      top: position.top + $currentInput.outerHeight(), 
      left: position.left 
     }); 
     if ($ul.find('li').length >= 6) { 
      $ul.css({ 
       height: '130px', 
       'overflow-y': 'scroll' 
      }); 
     } 
     if (result !== undefined) { 
      if ($(e.target).attr('id') !== $currentInput.attr('id') && $($(e.target).parent()[0]).attr('id') !== listId) { 
       destroy($ul); 
      } 
      $currentInput.after($ul); 
     } 
     $currentInput.trigger('onChange', [query, result]); 
    }); 
    $(document).on('click', '.autofill-show li', function (e) { 
     if($ul!==undefined && $($(this).parent()[0]).attr('id')==$ul.attr('id')){ 
      $ul.trigger('onSelect', [$(this).text(), $(this).data('value')]); 
     } 
     e.stopImmediatePropagation(); 
    }); 
    $(document).on('onSelect', '#'+listId,function (e, label, value) { 
     $currentInput.val(label); 
     if ($.isFunction(options.onSelect)) { 
      options.onSelect(label, value); 
     } 
     if ($(e.target).attr('id') !== $currentInput.attr('id') && $($(e.target).parent()[0]).attr('id') !== listId) { 
      destroy($ul); 
     } 
     e.stopImmediatePropagation(); 
    }); 
    $(document).on('onChange', '#'+$currentInput.attr('id'), function (e, query, result) { 
     if($ul!==undefined && $($(this).parent()[0]).attr('id')==$ul.attr('id')) { 
      result = $.grep(autoCompleteData, function (v) { 
       return v.label.search(new RegExp('\^' + query + '\$', "gi")) !== -1; 
      }); 
      if ($.isFunction(options.onChange)) { 
       options.onChange(query, result[0]); 
      } 
     } 
     e.stopImmediatePropagation(); 
    }); 
    $(document).on('click', function (e) { 
     console.log($(e.target)); 
     if ($(e.target).attr('id') !== $currentInput.attr('id') && $($(e.target).parent()[0]).attr('id') !== listId) { 
      destroy($ul); 
     } 
     e.stopImmediatePropagation(); 
    }); 
}; 
function destroy($ul) { 
    $ul.remove(); 
} 

Ecco il mio css:

.autofill-show{ 
    list-style: outside none none; 
    padding: 0; 
    border: 1px solid #ccc; 
    margin:0; 
    z-index: 9999999; 
} 
.autofill-show li{ 
    border: 1px solid #ccc; 
    text-align: center; 
    background: #fff; 
} 

.autofill-show li:hover{ 
    background: #9bcea3; 
    cursor: pointer; 
} 

Ed è così che io chiamo la mia funzione:

$('#autofill').autofill(); 
$('#autofill_2').autofill(); 

Qui è il collegamento di violino. https://jsfiddle.net/saineshmamgain/cs6g13q9/2/

+1

Essa vi aiuterà aiutare da noi se si converte questo frammento di codice o un fiddle, includono anche il codice HTML per il riempimento automatico e riempimento automatico-2 (consiglio btw cambiare per autofill_2) –

+0

@ZivWeissman Aggiunto un collegamento di violino. Grazie. – CodeZilla

+0

Molto probabilmente stai bersagliando gli stessi elementi con i selettori, devi aggiungere al tuo selettore qualcosa di unico per ID di elemento, qualcosa come currentId = '#' + $ i.attr ('id'); Lo guarderò più tardi quando avrò tempo –

risposta

2

Come ho già detto, e gli altri hanno aiutato, questo è un problema con i tuoi eventi e selettori.

Una soluzione può aggiungere un ID univoco a UL creato, non "basato su data/ora". Ogni volta che svuoterai un ID specifico e lo ricreare. Gli eventi saranno attivati ​​tramite HTML (aggiunto onclick = ...) e la mancanza con livello corrente/genitore con jQUERY.

ho aggiornato questo fiddle

potrebbe avere le cose che sono gli avanzi dal vostro violino che non ho tempo per perfezionare ... io lo lascio a voi.

La soluzione simile a questa:

function setUl(result) { 
    var $ul = $('<ul>'); 
    if (result !== undefined) { 
     $.each(result, function (k, v) { 
      $ul.append('<li data-value="' + v.value + '" onclick="clickHandle(this)">' + v.label + '</li>'); 
     }); 
    } 
    return $ul; 
} 

function clickHandle(ele){ 
var label = $(ele).text(); 
var value = $(ele).data('value'); 
var inputId = $(ele).parent("ul").attr("data-target"); 
$('#'+inputId).val(label); 
     if ($.isFunction(options.onSelect)) { 
      options.onSelect(label, value); 
     } 
} 

$.fn.autofill = function (options) { 
    if (options == undefined) { 
     options = {}; 
    } 
    var $currentInput = $(this); 
    console.log($($currentInput).attr('id')); 
    var autoCompleteData = $currentInput.data('autofill'); 
    var listId='autofill_' + $currentInput.attr('id'); 
    $currentInput.on('keyup focus', function (e) { 

     var query = $(this).val(); 
     var result = $.grep(autoCompleteData, function (v) { 
      return v.label.search(new RegExp(query, 'i')) !== -1; 
     }); 
     if($('#'+listId)){ 
      $('#'+listId).remove(); 
     } 
     $ul = setUl(result, $currentInput); 
     $ul.attr('id',listId); 
     $ul.addClass('autofill-show'); 
     $ul.attr('data-target',$currentInput.attr('id')); 
     var position = $currentInput.position(); 
     $ul.css({ 
      width: $currentInput.width() + parseInt($currentInput.css('padding-left'), 10) + parseInt($currentInput.css('padding-right'), 10), 
      position: 'absolute', 
      top: position.top + $currentInput.outerHeight(), 
      left: position.left 
     }); 
     if ($ul.find('li').length >= 6) { 
      $ul.css({ 
       height: '130px', 
       'overflow-y': 'scroll' 
      }); 
     } 
     if (result !== undefined) { 
      destroy($ul); 
      $currentInput.after($ul); 
     } 
     $currentInput.trigger('onChange', [query, result]); 
    }); 
    //end key up 

    $('#'+listId).on('onSelect',function (e, label, value) { 
     $currentInput.val(label); 
     if ($.isFunction(options.onSelect)) { 
      options.onSelect(label, value); 
     } 
     destroy($ul); 
     e.stopImmediatePropagation(); 
    }); 
    $(document).on('onChange', '#'+$currentInput.attr('id'), function (e, query, result) { 
     if($ul!==undefined && $($(this).parent()[0]).attr('id')==$ul.attr('id')) { 
      result = $.grep(autoCompleteData, function (v) { 
       return v.label.search(new RegExp('\^' + query + '\$', "gi")) !== -1; 
      }); 
      if ($.isFunction(options.onChange)) { 
       options.onChange(query, result[0]); 
      } 
     } 
     e.stopImmediatePropagation(); 
    }); 
    $currentInput.on('blur', function (e) { 
     window.setTimeout(function(){ 
     destroy($ul); 
     }, 100); 
    }); 
}; 
function destroy($ul) { 
    $ul.remove(); 
} 
+0

Grazie per il vostro aiuto, ha risolto il mio problema principale, farò il resto. – CodeZilla

0

Se ho capito bene il tuo quation (codice):

hidden 

code

Problemi correlati