https://fabulous.com/assets/js/custom.autocomplete.js

1function Autocomplete(el, end){
2  this.delay = 250;
3  this.delay_handle = 0;
4  this.last_request = 0;
5  this.target = el;
6  this.endpoint = end;
7  this.search = "";
8  this.result_index = -1;
9  this.max_results = 10;
10
11  var keys = {
12        ESC: 27,
13        TAB: 9,
14        RETURN: 13,
15        LEFT: 37,
16        UP: 38,
17        RIGHT: 39,
18        DOWN: 40
19      };
20
21  var self = this;
22
23  this.get_results = function(el){
24    var q = $(el).val();
25    self.last_request = Date.now();
26    self.delay_handle = 0;
27
28    if(q.length < 3){
29      console.log("Entry too short");
30      return;
31    }
32
33    if(q == self.search){
34      console.log("Duplicate");
35      return;
36    }
37
38    console.log("Hitting Server");
39    //return;
40
41    self.search = q;
42    $.post(self.endpoint+"?q="+q, {"noprogress" : true}, function(results){
43      self.show_results(results, el);
44    }, "json");
45  };
46
47  this.show_results = function(results, el){
48    self.cleanup(el);
49
50    if(! $(el).is(":visible")) return;
51    if(results.length < 1) return;
52    if(results.length > (self.max_results-1)) results = results.splice(0,(self.max_results-1));
53
54    $("body").append("<div id='autocomplete_container'><ul id='autocomplete_results'></ul></div>");
55    $("#autocomplete_container").css({
56      top: $(el).offset().top + $(el).height() + 3 + "px",
57      left: $(el).offset().left,
58    });
59
60    self.result_index = -1;
61    var search_base = self.search.split(".")[0];
62
63    //$("#autocomplete_results").append("<li class='autocomplete_listing'><a href='/search?q="+search_base.toLowerCase()+".xyz'>"+search_base.toLowerCase()+".xyz</a></li>");
64
65console.log(results);
66    for(var r in results){
67      $("#autocomplete_results").append("<li class='autocomplete_listing'><a href='/search?q="+results[r].data.toLowerCase()+"&provider="+results[r].provider+"'>"+results[r].value.toLowerCase()+"</a></li>");
68    }
69
70    $('html').click(function(){
71      self.cleanup(el);
72    });
73
74    $("#autocomplete_results a").click(function(){
75      self.cleanup(el);
76    });
77
78    $(el).on("keydown.autocomplete", function(e){
79      switch(e.which){
80        case keys.DOWN:
81          self.result_index = (self.result_index + 1) % self.max_results;
82
83          console.log(self.result_index);
84
85          $($("#autocomplete_results li").removeClass('selected')[self.result_index]).addClass('selected');
86
87          break;
88
89        case keys.UP:
90          self.result_index = (self.result_index - 1) % self.max_results;
91
92          if(self.result_index < 0) self.result_index = self.max_results + self.result_index;
93
94          $($("#autocomplete_results li").removeClass('selected')[self.result_index]).addClass('selected');
95
96          break;
97
98        case keys.ESC:
99          self.cleanup(this);
100
101          break;
102
103        case keys.RETURN:
104          if(self.result_index > -1) $("#autocomplete_container .selected a").click();
105          self.cleanup(this);
106          break;
107
108      }
109    });
110  };
111
112  this.cleanup = function(el){
113    $("#autocomplete_container").remove();
114
115    $(el).off(".autocomplete");
116  }
117
118  console.log("Setting up on keydown");
119  $(target).keydown(function(){
120    var el = this;
121    if($(this).val().length < 3){
122      console.log("Entry too short.");
123      return;
124    }
125
126    if(self.delay_handle !== 0){
127      console.log("Waiting for pause. Clearing last request");
128      clearTimeout(self.delay_handle);
129    }
130
131    self.delay_handle = setTimeout(function(){
132      self.get_results(el);
133    }, self.delay);
134  });
135
136
137  return self;
138}