Updated to typeahead 0.10.4

Updated from 0.9.3 to 0.10.4
API has changed quite a bit. Part of the functionality (prefetch etc)
has been taken out from the core lib, and merged into a new lib called
Bloodhound.
Bloodhound still has to be ts-ed.
This commit is contained in:
Gidon
2014-07-16 16:58:46 +03:00
parent d8ecb4d77d
commit 2cc58f1403
2 changed files with 116 additions and 266 deletions

View File

@@ -6,87 +6,6 @@
//
declare var Hogan: string;
// Countries
// Prefetches data, stores it in localStorage, and searches it on the client
$('.example-countries .typeahead').typeahead(null, {
name: 'countries',
prefetch: '../data/countries.json',
limit: 10
});
// Open Source Projects by Twitter
// Defines a custom template and template engine for rendering suggestions
$('.example-twitter-oss .typeahead').typeahead(null, {
name: 'twitter-oss',
prefetch: '../data/repos.json',
template: [
'<p class="repo-language">{{language}}</p>',
'<p class="repo-name">{{name}}</p>',
'<p class="repo-description">{{description}}</p>'
].join(''),
engine: Hogan
});
// Arabic Phrases
// Hardcoded list showing Right - To - Left(RTL) support
$('.example-arabic .typeahead').typeahead(null, {
name: 'arabic',
local: [
"الإنجليزية",
"نعم",
"لا",
"مرحبا",
"کيف الحال؟",
"أهلا",
"مع السلامة",
"لا أتكلم العربية",
"لا أفهم",
"أنا جائع"
]
});
// NBA and NHL Teams
// Two datasets that are prefetched, stored, and searched on the client
$('.example-sports .typeahead').typeahead(null, [
{
name: 'nba-teams',
prefetch: '../data/nba.json',
header: '<h3 class="league-name">NBA Teams</h3>'
},
{
name: 'nhl-teams',
prefetch: '../data/nhl.json',
header: '<h3 class="league-name">NHL Teams</h3>'
}
]);
// Best Picture Winners
// Prefetches some data then relies on remote requests for suggestions when prefetched data is insufficient
$('.example-films .typeahead').typeahead(null, [
{
name: 'best-picture-winners',
remote: '../data/films/queries/%QUERY.json',
prefetch: '../data/films/post_1960.json',
template: '<p><strong>{{value}}</strong> {{year}}</p>',
engine: Hogan
}
]);
// Countries - Modified the first test here to add options
// Specifies options to display hint with a highlight and adds a minimum length restriction for search
// Prefetches data, stores it in localStorage, and searches it on the client
$('.example-countries .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 2
},
{
name: 'countries',
prefetch: '../data/countries.json',
limit: 10
});
var substringMatcher = function (strs) {
return function findMatches(q, cb) {
var matches, substrRegex;
@@ -131,4 +50,20 @@ $('#the-basics .typeahead').typeahead({
name: 'states',
displayKey: 'value',
source: substringMatcher(states)
});
});
// custom templates
$('#custom-templates .typeahead').typeahead(null, {
name: 'best-pictures',
displayKey: 'value',
source: bestPictures.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
'unable to find any Best Picture winners that match the current query',
'</div>'
].join('\n'),
suggestion: Handlebars.compile('<p><strong>{{value}}</strong> {{year}}</p>')
}
});

View File

@@ -1,6 +1,6 @@
// Type definitions for typeahead.js 0.9.3
// Type definitions for typeahead.js 0.10.4
// Project: http://twitter.github.io/typeahead.js/
// Definitions by: Ivaylo Gochkov <https://github.com/igochkov/>
// Definitions by: Ivaylo Gochkov <https://github.com/igochkov/>, Gidon Junge <https://github.com/gjunge/>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
/// <reference path="../jquery/jquery.d.ts"/>
@@ -17,22 +17,55 @@ interface JQuery {
typeahead(methodName: 'destroy'): JQuery;
/**
* Sets the current query of the typeahead. This is always preferable to
* using $("input.typeahead").val(query), which will result in unexpected
* behavior. To clear the query, simply set it to an empty string.
*
* @constructor
* @param methodName Method 'setQuery'
* @param query The query to be set
*/
typeahead(methodName: 'setQuery', query: string): JQuery;
* Opens the dropdown menu of typeahead. Note that being open does not mean that the menu is visible.
* The menu is only visible when it is open and has content.
*
* @constructor
* @param methodName Method 'open'
*/
typeahead(methodName: 'open'): JQuery;
/**
* Accommodates the destroy and setQuery overloads.
* Closes the dropdown menu of typeahead.
*
* @constructor
* @param methodName Method 'close'
*/
typeahead(methodName: 'close'): JQuery;
/**
* Returns the current value of the typeahead.
* The value is the text the user has entered into the input element.
*
* @constructor
* @param methodName Method 'val'
*/
typeahead(methodName: 'val'): string;
/**
* Sets the value of the typeahead. This should be used in place of jQuery#val.
*
* @constructor
* @param methodName Method name ('destroy' or 'setQuery')
* @param query The query to be set in case method 'setQuery' is used.
* @param methodName Method 'val'
* @param query The value to be set
*/
typeahead(methodName: 'val', val: string): JQuery;
/**
* Accommodates the val overload.
*
* @constructor
* @param methodName Method name ('val')
*/
typeahead(methodName: string): string;
/**
* Accommodates multiple overloads.
*
* @constructor
* @param methodName Method name
* @param query The query to be set in case method 'val' is used.
*/
typeahead(methodName: string, query: string): JQuery;
@@ -66,188 +99,70 @@ declare module Twitter.Typeahead {
*/
interface Dataset {
/**
* The string used to identify the dataset. Used by typeahead.js
* to cache intelligently.
*/
name: string;
* The backing data source for suggestions.
* Expected to be a function with the signature (query, cb).
* It is expected that the function will compute the suggestion set (i.e. an array of JavaScript objects) for query and then invoke cb with said set.
* cb can be invoked synchronously or asynchronously.
*
*/
source: (query: string, cb: (result: any) => void) => void;
/**
* The key used to access the value of the datum in the datum object.
* Defaults to value.
* The name of the dataset.
* This will be appended to tt-dataset- to form the class name of the containing DOM element.
* Must only consist of underscores, dashes, letters (a-z), and numbers.
* Defaults to a random number.
*/
valueKey?: string;
name?: string;
/**
* The max number of suggestions from the dataset to display
* for a given query. Defaults to 5.
*/
limit?: number;
* For a given suggestion object, determines the string representation of it.
* This will be used when setting the value of the input control after a suggestion is selected. Can be either a key string or a function that transforms a suggestion object into a string.
* Defaults to value.
*/
displayKey?: string;
/**
* The template used to render suggestions. Can be a string or
* a precompiled template. If not provided, suggestions will render
* as their value contained in a <p> element (i.e. <p>value</p>).
*/
template?: any;
/**
* The template engine used to compile/render template if it is a
* string. Any engine can use used as long as it adheres to the
* expected API. Required if template is a string.
*/
engine?: string;
/**
* The header rendered before suggestions in the dropdown menu.
* Can be either a DOM element or HTML.
*/
header?: any;
/**
* The footer rendered after suggestions in the dropdown menu.
* Can be either a DOM element or HTML.
*/
footer?: any;
/**
* An array of datums or strings.
*/
local?: any[];
/**
* Can be a URL to a JSON file containing an array of datums or,
* if more configurability is needed, a prefetch options object.
*/
prefetch?: any;
/**
* Can be a URL to fetch suggestions from when the data provided by
* local and prefetch is insufficient or, if more configurability is
* needed, a remote options object.
*/
remote?: any;
* A hash of templates to be used when rendering the dataset.
* Note a precompiled template is a function that takes a JavaScript object as its first argument and returns a HTML string.
*/
templates?: Templates;
}
/**
* Prefetched data is fetched and processed on initialization.
* If the browser supports localStorage, the processed data will be cached
* there to prevent additional network requests on subsequent page loads.
*/
interface PrefetchOptions {
/**
* A URL to a JSON file containing an array of datums. Required.
*/
url: string;
interface Templates {
/**
* The time (in milliseconds) the prefetched data should be cached
* in localStorage. Defaults to 86400000 (1 day).
*/
ttl?: number;
* Rendered when 0 suggestions are available for the given query.
* Can be either a HTML string or a precompiled template.
* If it's a precompiled template, the passed in context will contain query
*/
empty?: string;
/**
* A function that transforms the response body into an array of datums.
*
* @param parsedResponse Response body
*/
filter?: (parsedResponse: any) => Datum[];
* Rendered at the bottom of the dataset.
* Can be either a HTML string or a precompiled template.
* If it's a precompiled template, the passed in context will contain query and isEmpty.
*/
footer?: string;
/**
* Rendered at the top of the dataset.
* Can be either a HTML string or a precompiled template.
* If it's a precompiled template, the passed in context will contain query and isEmpty.
*/
header?: string;
/**
* Used to render a single suggestion.
* If set, this has to be a precompiled template.
* The associated suggestion object will serve as the context.
* Defaults to the value of displayKey wrapped in a p tag i.e. <p>{{value}}</p>.
*/
suggestion?: string;
}
/**
* Remote data is only used when the data provided by local and prefetch
* is insufficient. In order to prevent an obscene number of requests
* being made to remote endpoint, typeahead.js rate-limits remote requests.
*/
interface RemoteOptions {
/**
* A URL to make requests to when the data provided by local and
* prefetch is insufficient. Required.
*/
url: string;
/**
* The type of data you're expecting from the server. Defaults to json.
* @see http://api.jquery.com/jQuery.ajax/ for more info.
*/
dataType?: string;
/**
* Determines whether or not the browser will cache responses.
* @see http://api.jquery.com/jQuery.ajax/ for more info.
*/
cache?: boolean;
/**
* Sets a timeout for requests.
* @see http://api.jquery.com/jQuery.ajax/ for more info.
*/
timeout?: number;
/**
* The pattern in url that will be replaced with the user's query
* when a request is made. Defaults to %QUERY.
*/
wildcard?: string;
/**
* Overrides the request URL. If set, no wildcard substitution will
* be performed on url.
*
* @param url Replacement URL
* @param uriEncodedQuery Encoded query
* @returns A valid URL
*/
replace?: (url: string, uriEncodedQuery: string) => string;
/**
* The function used for rate-limiting network requests.
* Can be either 'debounce' or 'throttle'. Defaults to 'debounce'.
*/
rateLimitFn?: string;
/**
* The time interval in milliseconds that will be used by rateLimitFn.
* Defaults to 300.
*/
rateLimitWait?: number;
/**
* The max number of parallel requests typeahead.js can have pending.
* Defaults to 6.
*/
maxParallelRequests?: number;
/**
* A pre-request callback. Can be used to set custom headers.
* @see http://api.jquery.com/jQuery.ajax/ for more info.
*/
beforeSend?: (jqXhr: JQueryXHR, settings: JQueryAjaxSettings) => void;
/**
* Transforms the response body into an array of datums.
*
* @param parsedResponse Response body
*/
filter?: (parsedResponse: any) => Datum[];
}
/**
* The individual units that compose datasets are called datums.
* The canonical form of a datum is an object with a value property and
* a tokens property.
*
* For ease of use, datums can also be represented as a string.
* Strings found in place of datum objects are implicitly converted
* to a datum object.
*
* When datums are rendered as suggestions, the datum object is the
* context passed to the template engine. This means if you include any
* arbitrary properties in datum objects, those properties will be
* available to the template used to render suggestions.
*/
interface Datum {
/**
* The string that represents the underlying value of the datum
*/
value: string;
/**
* A collection of single-word strings that aid typeahead.js in
* matching datums with a given query.
*/
tokens: string[];
}
/**
* When initializing a typeahead, there are a number of options you can configure.