Changeset View
Changeset View
Standalone View
Standalone View
webroot/rsrc/js/application/typeahead/behavior-typeahead-search.js
| /** | /** | ||||
| * @provides javelin-behavior-typeahead-search | * @provides javelin-behavior-typeahead-search | ||||
| * @requires javelin-behavior | * @requires javelin-behavior | ||||
| * javelin-stratcom | * javelin-stratcom | ||||
| * javelin-workflow | * javelin-workflow | ||||
| * javelin-dom | * javelin-dom | ||||
| */ | */ | ||||
| JX.behavior('typeahead-search', function(config) { | JX.behavior('typeahead-search', function(config) { | ||||
| var input = JX.$(config.inputID); | var input = JX.$(config.inputID); | ||||
| var frame = JX.$(config.frameID); | var frame = JX.$(config.frameID); | ||||
| var last = input.value; | var last = input.value; | ||||
| var in_flight = {}; | |||||
| function update() { | function update() { | ||||
| if (input.value == last) { | if (input.value == last) { | ||||
| // This is some kind of non-input keypress like an arrow key. Don't | // This is some kind of non-input keypress like an arrow key. Don't | ||||
| // send a query to the server. | // send a query to the server. | ||||
| return; | return; | ||||
| } | } | ||||
| // Call load() in a little while. If the user hasn't typed anything else, | // Call load() in a little while. If the user hasn't typed anything else, | ||||
| // we'll send a request to get results. | // we'll send a request to get results. | ||||
| setTimeout(JX.bind(null, load, input.value), 100); | setTimeout(JX.bind(null, load, input.value), 100); | ||||
| } | } | ||||
| function load(value) { | function load(value) { | ||||
| if (value != input.value) { | if (value != input.value) { | ||||
| // The user has typed some more text, so don't send a request yet. We | // The user has typed some more text, so don't send a request yet. We | ||||
| // want to wait for them to stop typing. | // want to wait for them to stop typing. | ||||
| return; | return; | ||||
| } | } | ||||
| if (value in in_flight) { | |||||
| // We've already sent a request for this query. | |||||
| return; | |||||
| } | |||||
| in_flight[value] = true; | |||||
| JX.DOM.alterClass(frame, 'loading', true); | JX.DOM.alterClass(frame, 'loading', true); | ||||
| new JX.Workflow(config.uri, {q: value, format: 'html'}) | new JX.Workflow(config.uri, {q: value, format: 'html'}) | ||||
| .setHandler(function(r) { | .setHandler(function(r) { | ||||
| delete in_flight[value]; | |||||
| if (value != input.value) { | if (value != input.value) { | ||||
| // The user typed some more stuff while the request was in flight, | // The user typed some more stuff while the request was in flight, | ||||
| // so ignore the response. | // so ignore the response. | ||||
| return; | return; | ||||
| } | } | ||||
| last = input.value; | last = input.value; | ||||
| JX.DOM.setContent(frame, JX.$H(r.markup)); | JX.DOM.setContent(frame, JX.$H(r.markup)); | ||||
| Show All 13 Lines | |||||