Posted By

Cwerther on 06/17/11


Tagged

ajax data jquery icon ui custom autocomplete


Versions (?)

jQuery Ui Autocomplete, Custom ajax data


 / Published in: jQuery
 

This is made for a webservice that outputs varaiable data according to user input, ajax is called each time there is a change on the input.

  1. $('.searchText').autocomplete({
  2. source: function (request, response) {
  3. $.ajax({
  4. url: "/handlers/autocomplete.xml",
  5. dataType: "xml",
  6. type: "GET",
  7. data: {
  8. content: $('.searchText').val()
  9. }, success: function (xmlResponse) {
  10. var data = $("product", xmlResponse).map(function (ul, item) {
  11. return {
  12. value: $.trim($("productName", this).text()),
  13. cat: $.trim($("productCatNr", this).text()),
  14. thumb: $.trim($("productThumb", this).text()),
  15. url: $.trim($("productUrl", this).text())
  16. };
  17. });
  18. response(data);
  19. }
  20. });
  21. }
  22. }).data("autocomplete")._renderItem = function (ul, item) {
  23. return $("<li></li>")
  24. .data("item.autocomplete", item)
  25. .append("<a href='" + item.url + "'>" + "<img src='" + item.thumb + "'/>" + "<h4>" + item.value + "</h4>" + "<span>" + item.cat + "</span>" + "</a>")
  26. .appendTo(ul);
  27. };

Report this snippet  

You need to login to post a comment.