Archief - jQuery volgorde van events (auto suggest box)

Bram · 13 mei 2011

Ahoi

Ik zit met een ei. Ik ben een auto suggest box aan't schrijven (om wat bij te leren en omdat de jquery ui auto complete niet voldoet), maar zit momenteel al vast.

De functionaliteit is eigenlijk dezelfde als die van Facebook als je een bericht stuurt naar iemand: je kan typen, de voorstellen komen tevoorschijn, je klikt ze aan en ze worden toegevoegd aan een lijstje.

Mijn html:

Code:

<div class='MultiInputWrapper' id='LinkedTables'>
	<input type='text' name='MultiInput' id='MultiInputDummy' />
</div>

<div id='SuggestionBox'>
	<ul>
		<li class='expl'>
		Multi search<br>
		<em>
		Typ een naam van een leerkracht of distributiegroep
		</em>
		</li>
	</ul>

</div>

Wat javascript:

Code:

$('#SuggestionBox a').live('click', function(event) {
	alert('clicked');
});

$('.MultiInputWrapper input').focus(function(event) {
	$('#SuggestionBox').fadeIn('fast');
});
$('.MultiInputWrapper input').blur(function(event) {
	$('#SuggestionBox').fadeOut('fast');
	$('.MultiInputWrapper input').val('');
	cleanSuggestionBox();
});
function cleanSuggestionBox()
{
	$('#SuggestionBox li:not(.expl)').remove();
}

Alles werkt tot nu toe naar behoren, maar het probleem is het volgende: mijn alert('clicked') (waar de code gaat komen om de links toe te voegen aan het lijstje)wordt niet uitgevoerd, ik vermoed doordat m'n blur event eerst optreedt, daardoor worden de links verwijderd.

Iemand suggesties hoe ik dit best aanpak?

Dastardly · 13 mei 2011

Code:

$("#.MultiInputWrapper input").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "!! NOG AANVULLEN MET UW EIGEN PAGINA !!",
                        data: "term=" + request.term,
                        dataType: "json",
                        type: "POST",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    value: item.Postcode + ' ' + item.Name
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(errorThrown);
                        }
                    });
                },
                minLength: 2,
                select: function (event, ui) {
                    /* Hier haalt ge de waardes op waar op is geklikt in de auto-complete */
                    var info = ui.item.label;
                    var postcode = info.substring(0, 4);
                    var stad = info.substring(5);
                    $("#SuggestionBox").html(postcode);
                },
                open: function (event, ui) {
                    /* Breedte dropdown vastleggen, anders verspringt die constant */
                    $("#.MultiInputWrapper input").autocomplete("widget").css("width", "248px");
                }
            });

Werkt toch perfect met autocomplete? Vond die nu net enorm gemakkelijk werken in combinatie met ajax

2 uurtjes werk en je hebt een mooie auto-complete die perfect doet wat je wil.

het grootste werk hier is een php, aspx, of wat dan ook, pagina aan t emaken die de ajax request juist afhandeld en een correcte json array teruggeeft.

ik ben er van uit gegaan dat je wel al wat van die zaken kent, dus heb zo goed als geen extra uitleg er bij staan. als je wil kan ik wel een volledig werkend voorbeeld maken (in .NET welteverstaan

).

Bram · 13 mei 2011

Hmm, merci. Ik ga het maandag eens uitgebreider bekijken op't werk.

Mijn data source is een simpel key value json object. De bedoeling is wel dat voor elke geselecteerde waarde een hidden field met als name="key" wordt toegevoegd.

Bram · 24 mei 2011

Ff bumpen: ik vroeg me iets algemeners af: mijn datasource voor m'n auto suggest is dus die json array (een php key => value array ge'echoot met json_encode()), maar daar kunnen een aantal honderd tot een aantal duizend elementen inzitten. Die array staat gewoon in de html.

Ik heb hier weinig ervaring mee, maar vroeg me af of het mss toch beter zou zijn om via ajax te werken?

Kleine edit:

Ik heb het werkende gekregen, maar zit nog met een ei. Ik zou graag de search results aan m'n eigen gestijlde lijst meegeven, dit lukt met volgende code

Code:

Input.autocomplete({
	appendTo : ".SuggestionBox", // of body, maakt weinig uit precies
	delay : 50,
	minLength : 2,
	source : source,
	select : function( event, ui ) {
		$('<a href="#"></a>')
			.html(ui.item.value)
			.append($('<input type="hidden" name="'+ui.item.id+'" value="on"'))
			.append($('&nbsp;<span>x</span>'))
			.insertBefore(Input);
		$(this).val('');
		return false;
	}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
	return $( "<li></li>" )
		.data( "item.autocomplete", item )
		.append( '<a href="#">' + item.value + "<br><em>" + item.desc + "</em></a>" )
		.appendTo( SuggestList );
};

Maar als ik nu op een gevonden item klikt, wordt het niet in de lijst geplaatst. Iemand hier ervaring mee?

Archief - jQuery volgorde van events (auto suggest box)

Bram

Legacy Member

Dastardly

Legacy Member

Bram

Legacy Member

Bram

Legacy Member