2009-05-26 6 views
21

Je souhaite implémenter une fonctionnalité de saisie semi-automatique avec des images sur mon site Web.jQuery autocomplete avec des images

Je voudrais utiliser le plugin jQuery autocomplete.

J'ai regardé leur code d'exemple.

Quelqu'un peut-il me expliquer ce que le code ci-dessous signifie en cas $ (document) de .ready():

$("#imageSearch").autocomplete("images.php", { 
    width: 320, 
    max: 4, 
    highlight: false, 
    scroll: true, 
    scrollHeight: 300, 
    formatItem: function(data, i, n, value) { 
    return "<img src='images/" + value + "'/> " + value.split(".")[0]; 
    }, 
    formatResult: function(data, value) { 
    return value.split(".")[0]; 
    } 
}); 

Mon exigence ultime est quand je tape quelques lettres dans la zone de texte, je veux les options à venir avec une image associée.

Répondre

21

Utilisez cette référence pour: http://api.jqueryui.com/autocomplete/


$("#imageSearch").autocomplete("images.php", { 

Appliquer pluging autocomplete à tous les champs #imageSearch. Premier paramètre je suppose que c'est la page qui génère la réponse en fonction de ce qui est entré (images.php);

 width: 320, 

Largeur de la chute vers le bas

 max: 4, 

suggestions maximum

 highlight: false, 

Sélectionnez true/false

 scroll: true, 

Barre de défilement aka type déroulante de la liste, ou juste un long div sous.

 scrollHeight: 300, 

Hauteur de la liste déroulante automatique terminée.

 formatItem: function(data, i, n, value) { 
      return "<img src='images/" + value + "'/> " + value.split(".")[0]; 
     }, 

Comment formater la réponse retournée de images.php.

 formatResult: function(data, value) { 
      return value.split(".")[0]; 
     } 

Comment retourner la valeur, si l'utilisateur sélectionne l'un des choix.

}); 

supports de fermeture: p

+0

Lorsque l'utilisateur clique sur l'un de l'option, je veux appeler une autre page où dois-je remplacer? – Shyju

+0

Réponse tardive, mais vous pouvez trouver la réponse dans la documentation mentionnée ci-dessus - http://api.jqueryui.com/autocomplete/#event-select –

4

C'est sur le Jquery Autocomplete PLUGIN, il n'y a pas cette option comme formatItem et FormatValue dans la Jquery réelle interface utilisateur saisie semi-automatique.

Je suggère aux gens de lire ce http://www.learningjquery.com/2010/06/autocomplete-migration-guide qui explique comment migrer de l'ancienne version du plugin vers le widget officiel de l'interface utilisateur.

Pour vous aider à travailler avec l'image saisie semi-automatique dans la liste suggère que vous devriez lire ce fil: http://forum.jquery.com/topic/using-html-in-autocomplete