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/
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) –
@ZivWeissman Aggiunto un collegamento di violino. Grazie. – CodeZilla
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 –