Jquery autocomplete input'ams

Liepos 20, 2013

Sveiki,

Turiu formą, kur mygtukas prideda vis po naują inputą. Dabar bandau daryti autocomplete'ą jiems. Tačiau pasidaro tik pirmam inputui, kaip padaryti taip, kad autocomplete'as veiktų ir kitiems dinamiškai sukurtiems inputams ?

Gal kas turite veikiantį pavyzdį ?

Ačiū.

Redagavo Liepos 20, 2013 insidefuture

Liepos 20, 2013

Vistiek turi būti kažkur kodas kokį inputą pridėt, tai ten prirašyk atributą - autocomplete="off"

Liepos 20, 2013

Prie ko čia off? :D

Tai inicializuok naujiems inputams, po pridėjimo.

Liepos 20, 2013

tiesiog užsibaigia tavo child divas ir tada praranda atributą autocomplete, kuris tikriausiai sukurtas ant class. Papostink čia kaip darai.

Coderis, juk jam reikia autocomplete įjungti visiems, o ne išjungti naujai pridedamiems

Liepos 20, 2013

Uch. Ne taip supratau ;\

Liepos 20, 2013

// pridedi nauja input'a
$("#kazkur").append('<input type="text" id="bla" />');
// inicijuoji
$("#bla").autocomplete();

Aišku gali ir gražiau tą patį padaryt. Bet tas būdas negalioja, kai nori paprastus event'us attach'int prie dinamiškai kuriamų elementų. Tą gali padaryti su jQuery .on() funkcija.

Liepos 20, 2013

Va čia mano index failiukas su forma.

<html>
<head>
<title> Dynamically create input fields- jQuery </title>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>        
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript">

$().ready(function() {
$("#p_new").autocomplete("get_prekiu_list.php", {
	width: 260,
	matchContains: true,
	//mustMatch: true,
	//minChars: 0,
	//multiple: true,
	//highlight: false,
	//multipleSeparator: ",",
	selectFirst: false
});
});


$(function() {
var addDiv = $('#addinput');
var i = $('#addinput p').size() + 1;

$('#addNew').live('click', function() {
$('<p><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);
i++;

return false;
});

$('#remNew').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});

</script>

</head>
<body>
<h2>Dynammically Add Another Input Box</h2>

<div id="addinput">
<p>
<input type="text" id="p_new" size="20" name="p_new" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a>
</p>
</div>

</body>
</html>

Liepos 20, 2013

Daryk autocomplete ne ant id, o ant klases ;)

<html>
<head>
<title> Dynamically create input fields- jQuery </title>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>        
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript">

$(".ac").on('focus', function () {
       $(".ac").autocomplete("get_prekiu_list.php", {
               width: 260,
               matchContains: true,
               //mustMatch: true,
               //minChars: 0,
               //multiple: true,
               //highlight: false,
               //multipleSeparator: ",",
               selectFirst: false
       });
});


$(function() {
var addDiv = $('#addinput');
var i = $('#addinput p').size() + 1;

$('#addNew').live('click', function() {
$('<p><input type="text" class="ac" id="p_new" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);
i++;

return false;
});

$('#remNew').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});

</script>

</head>
<body>
<h2>Dynammically Add Another Input Box</h2>

<div id="addinput">
<p>
<input type="text" class="ac" id="p_new" size="20" name="p_new" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a>
</p>
</div>

</body>
</html>

Redagavo Liepos 20, 2013 luknei

Liepos 20, 2013

Daryk autocomplete ne ant id, o ant klases ;)

Tokiu atveju veikia tik pirmam inputui, naujai sukurtiems vistiek neveikia tas autocomplete'as :(

Redagavo Liepos 20, 2013 insidefuture

Liepos 20, 2013

Daryk autocomplete ne ant id, o ant klases ;)

1. Daug papildomų nereikalingų veiksmų būtų, jeigu kaskart on focus inicijuot autocomplete'ą

2. Neveiks. Tam, kad .on() veiktų dinamiškai pridėtiems elementams, reikia jį attach'int prie tėvo, kuris visada egzistuos, o antru parametru nurodyti relative kelią iki norimu elementų.

insidefeature, o kam tu .live() naudoji? Tavo atveju jo nereikia, o jis apkrauna puslapį. Iš jquery jisai jau berods nuo 1.8 išimtas. Ir kitų daug nesamonėlių. Gali daryt pavyzdžiui šitaip:

<html>
<head>
<title> Dynamically create input fields- jQuery </title>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>        
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript">
function initAc(el) {
el.autocomplete("get_prekiu_list.php", {
		width: 260,
		matchContains: true,
		//mustMatch: true,
		//minChars: 0,
		//multiple: true,
		//highlight: false,
		//multipleSeparator: ",",
		selectFirst: false
});
}

$(document).ready(function() {
var i = $('#addinput > p').length + 1;
var parentDiv = $("#addinput");
$("#addNew").on('click', function() {
	parentDiv.append('<p><input type="text" class="ac" id="p_new_'+i+'" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" class="remNew">Remove</a> </p>');
	initAc($("input#p_new_"+i));
	i++;
	return false;
});

parentDiv.on('click', '.remNew', function() {
	if (i > 2) {

		$(this).parent().remove();
		i--;
	}
	return false;
});

initAc($('.ac'));
});

</script>

</head>
<body>
<h2>Dynammically Add Another Input Box</h2>

<div id="addinput">
<p>
<input type="text" class="ac" id="p_new" size="20" name="p_new" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a>
</p>
</div>

</body>
</html>

sėkmės.

P.S. labai jau seną jquery versiją naudoji. Pataisiau.

Redagavo Liepos 20, 2013 vitalikaz

Liepos 20, 2013

Norint, kad veiktų su dinaminiais elementais reikia naudoti:

.on(eventType, selector, function);

Naujus elementus su jQuery galima kurti:


	$('<blockquote></blockquote>', {
		class: 'test',
		text: $this.text()
	}).prependTo( $this.closest('p') );

Niekaip nesuprantu, kodėl jūs naudojat tiek daug HTML kodo su jQuery :D

Jai jau tenka naudoti daug HTML kodo su JavaScript, gal jau pats laikas išbandyti Handlebars.

Redagavo Liepos 20, 2013 mantys89

Liepos 20, 2013

Norint, kad veiktų su dinaminiais elementais reikia naudoti:
.on(eventType, selector, function);
Naujus elementus su jQuery galima kurti:
	$('<blockquote></blockquote>', {
		class: 'test',
		text: $this.text()
	}).prependTo( $this.closest('p') );
Niekaip nesuprantu, kodėl jūs naudojat tiek daug HTML kodo su jQuery :D
Jai jau tenka naudoti daug HTML kodo su JavaScript, gal jau pats laikas išbandyti Handlebars.

Kai vienas elementas - taip. Kai nested truputis elementų, tai lengviau vieną eilutę html'o parašyt, vistiek galiausiai viskas į tai sueina iš JQ pusės. O template'ingas, tai handlebars'ų pats asmeniškai nebandžiau, bet knockout.js visai patinka :)

Liepos 20, 2013

1. Daug papildomų nereikalingų veiksmų būtų, jeigu kaskart on focus inicijuot autocomplete'ą
2. Neveiks. Tam, kad .on() veiktų dinamiškai pridėtiems elementams, reikia jį attach'int prie tėvo, kuris visada egzistuos, o antru parametru nurodyti relative kelią iki norimu elementų.

insidefeature, o kam tu .live() naudoji? Tavo atveju jo nereikia, o jis apkrauna puslapį. Iš jquery jisai jau berods nuo 1.8 išimtas. Ir kitų daug nesamonėlių. Gali daryt pavyzdžiui šitaip:

sėkmės.

P.S. labai jau seną jquery versiją naudoji. Pataisiau.

Ačiū už informaciją.

Tačiau ar turėjo veikti tavo kodas ? kadangi man neveikia tas autocomplete'as :(

Liepos 20, 2013

Kai vienas elementas - taip. Kai nested truputis elementų, tai lengviau vieną eilutę html'o parašyt, vistiek galiausiai viskas į tai sueina iš JQ pusės. O template'ingas, tai handlebars'ų pats asmeniškai nebandžiau, bet knockout.js visai patinka :)

Viską galima pasidaryti su templates, o tas kad lengviau pusę HTML kodo sukišti į JavaScript yra didžiausia nesamonė, kurią dažnai daro pradedantieji. :) Tokių atveju labai sudėtinga daryti kokius nors pakeitimus, o ypač didžiulė problema kyla kai reikia debuginti. Geriausia kuriant pluginą daryti jį universalų, kad lengvai būtų galima pritaikyti. O nested elements geriau nenaudoti, juk paprasčiau įterpti tik dinaminį turinį į HTML, tai yra dalį elementų kurie bus naudojami paslėpti su CSS, o naudojant jQuery parodyti, kopijuoti, įterpti kitur, pridėti dinaminį turinį....

HTML, CSS ir JavaScript turi būti atskiruose failuose, be jokių išimčių :D

Redagavo Liepos 20, 2013 mantys89

Liepos 20, 2013

Viską galima pasidaryti su templates, o tas kad lengviau pusę HTML kodo sukišti į JavaScript yra didžiausia nesamonė, kurią dažnai daro pradedantieji. :) Tokių atveju labai sudėtinga daryti kokius nors pakeitimus, o ypač didžiulė problema kyla kai reikia debuginti. Geriausia kuriant pluginą daryti jį universalų, kad lengvai būtų galima pritaikyti. O nested elements geriau nenaudoti, juk paprasčiau įterpti tik dinaminį turinį į HTML, tai yra dalį elementų kurie bus naudojami paslėpti su CSS, o naudojant jQuery parodyti, kopijuoti, įterpti kitur, pridėti dinaminį turinį....
HTML, CSS ir JavaScript turi būti atskiruose failuose, be jokių išimčių :D

Kas be ko. Tiesiog pritaikiau kodą prie dabartinės struktūros. Iš kultūrinės pusės tai aišku labai daug ko ten reikia keisti :)

Rugpjūčio 4, 2013

Ačiū nariui vitalikaz už pagalbą :)

Tik dar vienas klausimas. Kaip padaryti, kad autocomplete'as veiktų dar naujam inputui. Padariau, kad paspaudus add new, man pridėtų dar vieną inputą .

<input type="text" class="ac2" id="p_new2" size="20" name="p_new2" value="" placeholder="Input Value2" />

Bandžiau ten įvairiai, bet man niekaip antram inputui autocomplet'as nepasidaro...

Galėtumėt pagelbėt ?

Redagavo Rugpjūčio 4, 2013 insidefuture

Prisijungti

Jquery autocomplete input'ams

Rekomenduojami pranešimai

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

mantys89 24

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

mantys89 24

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Dabar naršo 0 narių

Prisijunk prie bendruomenės dabar!

Naujausios temos

Karštos temos