Advanced Search

jQuery Ui Autocomplete, Custom ajax data

/ Published in: jQuery
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.