My end goal is to create a type-ahead (TA) that can be used in a key-value setting for follow-on operations. I am having an issue with initialization of a basic one.
I have a table of over 50M addresses. I realize this is too much for a TA, so my initial thought is to split the dataset by zipcode which reduces teh amount to about 6K-10K possibilities. To that end, I have the following code:
var addresses = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: "http://live2.offrs.com/buyerherodev/data/addressTA.cfm?zip="+zip,
cacheKey: "change here!"
}
});
$('.typeahead').typeahead(null, {
name: 'addresses',
source: addresses,
display: 'Address',
});
Of note, zip is passed on by URL GET Variable. In my example, I'm using 20001
The JSON return format is: [{"ParcelID":"", "Address":""},{"ParcelID":"", "Address":""}]
I need the Address to be searchable, and the ParcelID stored in a value when selected for further operations.
The HTML:
<div id="menu">
<input tabindex="-1" spellcheck="false" autocomplete="off" readonly="" style="position: absolute; top: 20px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: rgb(255, 255, 255) none repeat scroll 0% 0%;" class="form-control typeahead tt-hint" type="text">
<input dir="auto" style="position: relative; vertical-align: top; background-color: transparent;" spellcheck="false" autocomplete="off" id="address" class="form-control typeahead tt-input" placeholder="Locate by Address..." type="text">
<pre style="position: absolute; visibility: hidden; white-space: pre; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: optimizelegibility; text-transform: none;" aria-hidden="true"></pre>
<span style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none; right: auto;" class="tt-dropdown-menu">
<div class="tt-dataset-states"></div>
</span>
<div id= "fulldata"></div>
</div>
Any help would be greatly appreciated. Thanks Much
