jQuery ajax autocomplete search, Hoe kan ik het automatisch aanvullen van tags maken met jQuery?

Stel dat er tags in de databasetabel staan, of in een tekstbestand of in een XML-bestand.

Wanneer een gebruiker iets in het tekstvak typt, roept het de jQuery ajax autocomplete-zoekfunctie op zoals we doen voor het toevoegen van stackoverflow-tags.

Hoe kan ik dit doen met jQuery ajax? Kan iemand volledige code met een voorbeeld plaatsen?

Ik heb dit gelezen, http://docs.jquery.com/Plugins/Autocomplete , maar kan niet begrijpen hoe je dat moet implementeren.

0

1 antwoord

Ik zou je aanraden om de jQuery UI AutoComplete te gebruiken. De documentatie geeft een volledig voorbeeld van hoe het met AJAX moet worden opgezet.

U zet een invoerveld:

<input id="tags" name="tags" />

en vervolgens de plug-in toepassen:

$(function() {
    $('#tags').autocomplete({
        source: '/tags',
        minLength: 2
    });
});

Dit zal het /tags server side script aanroepen en het de term query string parameter doorgeven die de inputwaarde zal bevatten. Bijvoorbeeld: /tags? Term = asp . De server gebruikt dan de waarde asp in de database en antwoordt met een JSON van het volgende formulier:

[ { "id": "1", "label": "label 1", "value": "value 1" }, 
  { "id": "2", "label": "label 2", "value": "value 2" },
  { "id": "3", "label": "label 3", "value": "value 3" },
  ...
]

die een reeks objecten vertegenwoordigt die overeenkomen met de zoekcriteria en die in de vervolgkeuzelijst worden weergegeven.

Het is duidelijk dat de implementatie van het script aan de serverkant sterk zal afhangen van de servertaal die u gebruikt, de database-toegangstechnologie, ...

2
toegevoegd
Waar is de search.php? Wat is de inhoud van search.php? Hoe zal het gegevens retourneren?
toegevoegd de auteur shibly, de bron
@guru, dat is een heel andere vraag met betrekking tot PHP. Ik zou je aanraden het apart te vragen, omdat het niets meer te maken heeft met de Autocomplete-plug-in die je hier vroeg. Maar voordat u het vraagt, moet u ervoor zorgen dat u enige inspanningen aan uw zijde doet of dat de vraag kan worden afgesloten. Vink bijvoorbeeld een van de vele artikelen op internet aan en probeer het te implementeren: jensbits.com/2010/03/29/…
toegevoegd de auteur Darin Dimitrov, de bron