{{language}}
', - '{{name}}
', - '{{description}}
' - ].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: '{{value}} – {{year}}
', - 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) - }); \ No newline at end of file + }); + + +// custom templates +$('#custom-templates .typeahead').typeahead(null, { + name: 'best-pictures', + displayKey: 'value', + source: bestPictures.ttAdapter(), + templates: { + empty: [ + '' + ].join('\n'), + suggestion: Handlebars.compile('{{value}} – {{year}}
') + } +}); \ No newline at end of file diff --git a/typeahead/typeahead.d.ts b/typeahead/typeahead.d.ts index 3f4c61b1d16c06..fe85846397ba93 100644 --- a/typeahead/typeahead.d.ts +++ b/typeahead/typeahead.d.ts @@ -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 Gochkovelement (i.e.
value
). - */ - 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; - } + * 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; - /** - * 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. + * 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. */ - url: string; + name?: string; /** - * The time (in milliseconds) the prefetched data should be cached - * in localStorage. Defaults to 86400000 (1 day). - */ - ttl?: 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; /** - * A function that transforms the response body into an array of datums. - * - * @param parsedResponse Response body - */ - filter?: (parsedResponse: any) => Datum[]; + * 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; } - /** - * 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; + + interface Templates { /** - * The function used for rate-limiting network requests. - * Can be either 'debounce' or 'throttle'. Defaults to 'debounce'. - */ - rateLimitFn?: string; + * 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; /** - * The time interval in milliseconds that will be used by rateLimitFn. - * Defaults to 300. - */ - rateLimitWait?: number; + * 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; /** - * The max number of parallel requests typeahead.js can have pending. - * Defaults to 6. - */ - maxParallelRequests?: number; + * 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; /** - * 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; + * 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.{{value}}
. + */ + suggestion?: string; - /** - * 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.