New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

autocomplete.js

Package Overview
Dependencies
Maintainers
1
Versions
65
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

autocomplete.js - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/autocomplete.angular.js
dist/autocomplete.angular.min.js
examples/basic_angular.html
examples/basic.gif
examples/basic.html
index_angular.js
index_jquery.js
src/angular/directive.js
src/jquery/plugin.js
test/playground_angular.html
test/unit/angular_spec.js
test/unit/jquery_spec.js

6

CHANGELOG.md

@@ -19,5 +19,9 @@ Changelog

### 0.3.0 July 27, 2015
* Add Angular.js support [#7]
### 0.2.0 July 16, 2015
* Ability to change the layout based on the matching datasets #11
* Ability to change the layout based on the matching datasets [#11]

@@ -24,0 +28,0 @@ ### 0.1.0 July 13, 2015

19

Gruntfile.js

@@ -21,12 +21,23 @@ 'use strict';

},
autocomplete: {
src: 'index.js',
jquery: {
src: 'index_jquery.js',
dest: '<%= buildDir %>/autocomplete.jquery.js'
},
autocompleteMinified: {
jqueryMinified: {
options: {
plugin: [['minifyify', {map: false}]]
},
src: 'index.js',
src: 'index_jquery.js',
dest: '<%= buildDir %>/autocomplete.jquery.min.js'
},
angular: {
src: 'index_angular.js',
dest: '<%= buildDir %>/autocomplete.angular.js'
},
angularMinified: {
options: {
plugin: [['minifyify', {map: false}]]
},
src: 'index_angular.js',
dest: '<%= buildDir %>/autocomplete.angular.min.js'
}

@@ -33,0 +44,0 @@ },

2

index.js
'use strict';
module.exports = require('./src/autocomplete/plugin.js');
module.exports = require('./src/autocomplete/typeahead.js');

2

karma.conf.js

@@ -31,2 +31,4 @@ 'use strict';

'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'src/**/*.js',

@@ -33,0 +35,0 @@ 'test/**/*_spec.js'

15

package.json

@@ -19,2 +19,5 @@ {

"devDependencies": {
"angular": "~1.4.2",
"angular-mocks": "^1.4.2",
"@algolia/jsfmt": "1.3.0",
"browserify-istanbul": "^0.2.1",

@@ -28,2 +31,3 @@ "chai": "^3.0.0",

"grunt-browserify": "^3.8.0",
"grunt-cli": "0.1.13",
"grunt-concurrent": "^2.0.0",

@@ -51,2 +55,3 @@ "grunt-contrib-clean": "~0.6.0",

"karma-safari-launcher": "^0.1.1",
"lodash-compat": "3.10.0",
"minifyify": "^7.0.2",

@@ -58,6 +63,12 @@ "mocha": "^2.2.5",

"scripts": {
"test": "./node_modules/karma/bin/karma start --single-run"
"test": "./node_modules/karma/bin/karma start --single-run && grunt lint && npm run checkstyle",
"dev": "grunt dev",
"lint": "grunt lint",
"jsfmt": "jsfmt '!(node_modules|dist|coverage){,/**/}*.js'",
"checkstyle": "npm run jsfmt -- --diff",
"server": "grunt server",
"build": "grunt"
},
"version": "0.2.0",
"version": "0.3.0",
"main": "index.js"
}

167

README.md
Autocomplete.js
=================
This JavaScript library adds a fast and fully-featured auto-completion menu to your search box displaying results "as you type". It can be easily combined with Algolia's realtime search engine. The library is available as a jQuery plugin.
This JavaScript library adds a fast and fully-featured auto-completion menu to your search box displaying results "as you type". It can easily be combined with Algolia's realtime search engine. The library is available as a jQuery plugin or an Angular.js directive.

@@ -19,2 +19,3 @@ [![build status](https://travis-ci.org/algolia/algoliasearch-client-node.svg?branch=master)](http://travis-ci.org/algolia/autocomplete.js)

* [Usage](#usage)
* [Quick Start](#quick-start)
* [API](#api)

@@ -42,20 +43,36 @@ * [Options](#options)

The `autocomplete.js` library must be included **after** jQuery.
The `autocomplete.js` library must be included **after** jQuery and/or Angular.js.
You can include it from a CDN:
#### From a CDN
We recommend including it from a CDN:
##### jsDelivr
```html
<script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
<!-- OR -->
<script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.angular.min.js"></script>
```
##### cdnjs
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/autocomplete.js/<VERSION>/autocomplete.jquery.min.js"></script>
<!-- OR -->
<script src="//cdnjs.cloudflare.com/ajax/libs/autocomplete.js/<VERSION>/autocomplete.angular.min.js"></script>
```
Or use it with [Browserify](http://browserify.org/):
#### From the sources
Or you can fetch the sources:
##### Build/Dist
You can find the builded version in [dist/](https://github.com/algolia/autocomplete.js/tree/feature/angular.js/dist).
##### Browserify
You can require it and use [Browserify](http://browserify.org/):
```js

@@ -68,4 +85,115 @@ var autocomplete = require('autocomplete.js');

### API
### Quick Start
To turn any HTML `<input />` into a simple and fast as-you-type auto-completion menu following one of the 2 next sections:
#### With jQuery
1. Include `autocomplete.jquery.min.js` after including `jQuery`
1. Initialize the auto-completion menu calling the `autocomplete` jQuery plugin
```html
<input type="text" id="search-input" />
<!-- [ ... ] -->
<script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
<script>
var client = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey')
var index = client.initIndex('YourIndex');
$('#search-input').autocomplete({ hint: false }, [
{
source: index.ttAdapter({ hitsPerPage: 5 }),
displayKey: 'my_attribute',
templates: {
suggestion: function(suggestion) {
return suggestion._highlightResult.my_attribute.value;
}
}
}
]).on('autocomplete:selected', function(even, suggestion, dataset) {
console.log(suggestion, dataset);
});
</script>
```
#### With Angular.js
1. Include `autocomplete.angular.min.js` after including `jQuery` & `Angular.js`
1. Inject the `algolia.autocomplete` module
1. Add the `autocomplete`, `aa-datasets` and the optional `aa-options` attribute to your search bar
```html
<div ng-controller="yourController">
<input type="text" id="search-input" autocomplete aa-datasets="getDatasets()" />
</div>
<!-- [ ... ] -->
<script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.angular.min.js"></script>
<script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.angular.min.js"></script>
<script>
angular.module('myApp', ['algoliasearch', 'algolia.autocomplete'])
.controller('yourController', ['$scope', 'algolia', function($scope, algolia) {
var client = algolia.Client('YourApplicationID', 'YourSearchOnlyAPIKey');
var index = client.initIndex('YourIndex');
$scope.getDatasets = function() {
return {
source: index.ttAdapter({ hitsPerPage: 5 }),
displayKey: 'my_attribute',
templates: {
suggestion: function(suggestion) {
return suggestion._highlightResult.my_attribute.value;
}
}
};
};
$scope.$on('autocomplete:selected', function(event, suggestion, dataset) {
console.log(suggestion, dataset);
});
}]);
</script>
```
#### Look & feel
Add the following CSS rules to add a default style:
```css
.algolia-autocomplete {
width: 100%;
}
.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
width: 100%;
}
.algolia-autocomplete .aa-hint {
color: #999;
}
.algolia-autocomplete .aa-dropdown-menu {
width: 100%;
background-color: #fff;
border: 1px solid #999;
border-top: none;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
cursor: pointer;
padding: 5px 4px;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
background-color: #B2D7FF;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
font-weight: bold;
font-style: normal;
}
```
Here is what the [basic example](https://github.com/algolia/autocomplete.js/tree/master/examples) looks like:
![Basic example](./examples/basic.gif)
API
----
#### jQuery#autocomplete(options, [\*datasets])

@@ -148,2 +276,4 @@

* `debug` – If `true`, the autocomplete will not close on `blur`. Defaults to `false`.
* `templates` – An optional hash overriding the default templates.

@@ -296,3 +426,3 @@ * `dropdownMenu` – the dropdown menu template. The template should include all *dataset* placeholders.

```html
<span class="aa-dropdown-menu">
<span class="aa-dropdown-menu{{#datasets}} aa-{{'with' or 'without'}}-{{name}}{{/datasets}}">
{{#datasets}}

@@ -322,7 +452,7 @@ <div class="aa-dataset-{{name}}">

The project is built using [Grunt](http://gruntjs.com/). To start developing, you can use the following commands:
To start developing, you can use the following commands:
```sh
$ npm install
$ grunt dev
$ npm run dev
$ open http://localhost:8888/test/playground.html

@@ -334,3 +464,3 @@ ```

```sh
$ grunt lint
$ npm run lint
```

@@ -352,4 +482,4 @@

```sh
$ grunt
$ grunt server
$ npm run build
$ npm run server
$ ngrok 8888

@@ -359,2 +489,17 @@ $ TEST_HOST=http://YOUR_NGROK_ID.ngrok.com SAUCE_ACCESS_KEY=YOUR_KEY SAUCE_USERNAME=YOUR_USERNAME./node_modules/mocha/bin/mocha --harmony -R spec ./test/integration/test.js

Code style
------
You can check the code style with:
```sh
npm run checkstyle
```
You can fix style issues automatically with:
```sh
npm run jsfmt
```
Credits

@@ -361,0 +506,0 @@ --------

4

src/autocomplete/css.js

@@ -57,4 +57,4 @@ 'use strict';

if (_.isMsie()) {
// ie6-8 (and 9?) doesn't fire hover and click events for elements with
// transparent backgrounds, for a workaround, use 1x1 transparent gif
// ie6-8 (and 9?) doesn't fire hover and click events for elements with
// transparent backgrounds, for a workaround, use 1x1 transparent gif
_.mixin(css.input, {

@@ -61,0 +61,0 @@ backgroundImage: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)'

42

src/autocomplete/dataset.js
'use strict';
/* eslint-env jquery */
var datasetKey = 'aaDataset';

@@ -22,7 +20,7 @@ var valueKey = 'aaValue';

if (!o.source) {
$.error('missing source');
_.error('missing source');
}
if (o.name && !isValidName(o.name)) {
$.error('invalid dataset name: ' + o.name);
_.error('invalid dataset name: ' + o.name);
}

@@ -70,7 +68,9 @@

_render: function render(query, suggestions) {
if (!this.$el) { return; }
if (!this.$el) {
return;
}
var that = this;
var hasSuggestions;
var args = [].slice.call(arguments, 2);
var renderArgs = [].slice.call(arguments, 2);

@@ -82,10 +82,10 @@ this.$el.empty();

this.$el
.html(getEmptyHtml.apply(this, args))
.prepend(that.templates.header ? getHeaderHtml.apply(this, args) : null)
.append(that.templates.footer ? getFooterHtml.apply(this, args) : null);
.html(getEmptyHtml.apply(this, renderArgs))
.prepend(that.templates.header ? getHeaderHtml.apply(this, renderArgs) : null)
.append(that.templates.footer ? getFooterHtml.apply(this, renderArgs) : null);
} else if (hasSuggestions) {
this.$el
.html(getSuggestionsHtml.apply(this, args))
.prepend(that.templates.header ? getHeaderHtml.apply(this, args) : null)
.append(that.templates.footer ? getFooterHtml.apply(this, args) : null);
.html(getSuggestionsHtml.apply(this, renderArgs))
.prepend(that.templates.header ? getHeaderHtml.apply(this, renderArgs) : null)
.append(that.templates.footer ? getFooterHtml.apply(this, renderArgs) : null);
}

@@ -102,3 +102,3 @@

var args = [].slice.call(arguments, 0);
args = [{ query: query, isEmpty: true }].concat(args);
args = [{query: query, isEmpty: true}].concat(args);
return that.templates.empty.apply(this, args);

@@ -125,6 +125,6 @@ }

$el = $(html.suggestion)
.append(that.templates.suggestion.apply(this, [suggestion].concat(args)))
.data(datasetKey, that.name)
.data(valueKey, that.displayFn(suggestion))
.data(datumKey, suggestion);
.append(that.templates.suggestion.apply(this, [suggestion].concat(args)))
.data(datasetKey, that.name)
.data(valueKey, that.displayFn(suggestion))
.data(datumKey, suggestion);

@@ -139,3 +139,3 @@ $el.children().each(function() { $(this).css(css.suggestionChild); });

var args = [].slice.call(arguments, 0);
args = [{ query: query, isEmpty: !hasSuggestions }].concat(args);
args = [{query: query, isEmpty: !hasSuggestions}].concat(args);
return that.templates.header.apply(this, args);

@@ -146,3 +146,3 @@ }

var args = [].slice.call(arguments, 0);
args = [{ query: query, isEmpty: !hasSuggestions }].concat(args);
args = [{query: query, isEmpty: !hasSuggestions}].concat(args);
return that.templates.footer.apply(this, args);

@@ -205,3 +205,5 @@ }

function displayFn(obj) { return obj[display]; }
function displayFn(obj) {
return obj[display];
}
}

@@ -208,0 +210,0 @@

43

src/autocomplete/dropdown.js
'use strict';
/* eslint-env jquery */
var _ = require('../common/utils.js');

@@ -22,5 +20,12 @@ var EventEmitter = require('./event_emitter.js');

if (!o.menu) {
$.error('menu is required');
_.error('menu is required');
}
if (!_.isArray(o.datasets) && !_.isObject(o.datasets)) {
_.error('1 or more datasets required');
}
if (!o.datasets) {
$.error('datasets is required');
}
this.isOpen = false;

@@ -35,8 +40,8 @@ this.isEmpty = true;

this.$menu = $(o.menu)
.on('click.aa', '.aa-suggestion', onSuggestionClick)
.on('mouseenter.aa', '.aa-suggestion', onSuggestionMouseEnter)
.on('mouseleave.aa', '.aa-suggestion', onSuggestionMouseLeave);
.on('click.aa', '.aa-suggestion', onSuggestionClick)
.on('mouseenter.aa', '.aa-suggestion', onSuggestionMouseEnter)
.on('mouseleave.aa', '.aa-suggestion', onSuggestionMouseLeave);
if (o.templates && o.templates.header) {
this.$menu.prepend((_.templatify(o.templates.header))());
this.$menu.prepend(_.templatify(o.templates.header));
}

@@ -54,3 +59,3 @@

if (o.templates && o.templates.footer) {
this.$menu.append((_.templatify(o.templates.footer))());
this.$menu.append(_.templatify(o.templates.footer));
}

@@ -90,3 +95,5 @@ }

function isDatasetEmpty(dataset) { return dataset.isEmpty(); }
function isDatasetEmpty(dataset) {
return dataset.isEmpty();
}
},

@@ -130,3 +137,5 @@

if (!this.isOpen) { return; }
if (!this.isOpen) {
return;
}

@@ -239,3 +248,5 @@ $oldCursor = this._getCursor();

function updateDataset(dataset) { dataset.update(query); }
function updateDataset(dataset) {
dataset.update(query);
}
},

@@ -247,3 +258,5 @@

function clearDataset(dataset) { dataset.clear(); }
function clearDataset(dataset) {
dataset.clear();
}
},

@@ -262,3 +275,5 @@

function destroyDataset(dataset) { dataset.destroy(); }
function destroyDataset(dataset) {
dataset.destroy();
}
}

@@ -272,5 +287,5 @@ });

function initializeDataset($menu, oDataset) {
return new Dropdown.Dataset(_.mixin({ '$menu': $menu }, oDataset));
return new Dropdown.Dataset(_.mixin({'$menu': $menu}, oDataset));
}
module.exports = Dropdown;

6

src/autocomplete/event_bus.js
'use strict';
/* eslint-env jquery */
var namespace = 'autocomplete:';
var namespace = 'typeahead:';
var _ = require('../common/utils.js');

@@ -14,3 +12,3 @@

if (!o || !o.el) {
$.error('EventBus initialized without el');
_.error('EventBus initialized without el');
}

@@ -17,0 +15,0 @@

13

src/autocomplete/event_emitter.js

@@ -16,3 +16,5 @@ 'use strict';

if (!cb) { return this; }
if (!cb) {
return this;
}

@@ -43,3 +45,5 @@ types = types.split(splitter);

if (!this._callbacks) { return this; }
if (!this._callbacks) {
return this;
}

@@ -62,3 +66,5 @@ types = types.split(splitter);

if (!this._callbacks) { return this; }
if (!this._callbacks) {
return this;
}

@@ -116,2 +122,1 @@ types = types.split(splitter);

}

57

src/autocomplete/input.js
'use strict';
/* eslint-env jquery */
var specialKeyCodeMap;

@@ -33,3 +31,3 @@

if (!o.input) {
$.error('input is missing');
_.error('input is missing');
}

@@ -45,12 +43,9 @@

this.$input = $(o.input)
.on('blur.aa', onBlur)
.on('focus.aa', onFocus)
.on('keydown.aa', onKeydown);
.on('blur.aa', onBlur)
.on('focus.aa', onFocus)
.on('keydown.aa', onKeydown);
// if no hint, noop all the hint related functions
if (this.$hint.length === 0) {
this.setHint =
this.getHint =
this.clearHint =
this.clearHintIfInvalid = _.noop;
this.setHint = this.getHint = this.clearHint = this.clearHintIfInvalid = _.noop;
}

@@ -66,3 +61,5 @@

// if a special key triggered this, ignore it
if (specialKeyCodeMap[$e.which || $e.keyCode]) { return; }
if (specialKeyCodeMap[$e.which || $e.keyCode]) {
return;
}

@@ -297,21 +294,21 @@ // give the browser a chance to update the value of the input

return $('<pre aria-hidden="true"></pre>')
.css({
// position helper off-screen
position: 'absolute',
visibility: 'hidden',
// avoid line breaks and whitespace collapsing
whiteSpace: 'pre',
// use same font css as input to calculate accurate width
fontFamily: $input.css('font-family'),
fontSize: $input.css('font-size'),
fontStyle: $input.css('font-style'),
fontVariant: $input.css('font-variant'),
fontWeight: $input.css('font-weight'),
wordSpacing: $input.css('word-spacing'),
letterSpacing: $input.css('letter-spacing'),
textIndent: $input.css('text-indent'),
textRendering: $input.css('text-rendering'),
textTransform: $input.css('text-transform')
})
.insertAfter($input);
.css({
// position helper off-screen
position: 'absolute',
visibility: 'hidden',
// avoid line breaks and whitespace collapsing
whiteSpace: 'pre',
// use same font css as input to calculate accurate width
fontFamily: $input.css('font-family'),
fontSize: $input.css('font-size'),
fontStyle: $input.css('font-style'),
fontVariant: $input.css('font-variant'),
fontWeight: $input.css('font-weight'),
wordSpacing: $input.css('word-spacing'),
letterSpacing: $input.css('letter-spacing'),
textIndent: $input.css('text-indent'),
textRendering: $input.css('text-rendering'),
textTransform: $input.css('text-transform')
})
.insertAfter($input);
}

@@ -318,0 +315,0 @@

76

src/autocomplete/typeahead.js
'use strict';
/* eslint-env jquery */
var attrsKey = 'aaAttrs';

@@ -26,3 +24,3 @@

if (!o.input) {
$.error('missing input');
_.error('missing input');
}

@@ -68,21 +66,21 @@

this.dropdown = new Typeahead.Dropdown({menu: $menu, datasets: o.datasets, templates: o.templates})
.onSync('suggestionClicked', this._onSuggestionClicked, this)
.onSync('cursorMoved', this._onCursorMoved, this)
.onSync('cursorRemoved', this._onCursorRemoved, this)
.onSync('opened', this._onOpened, this)
.onSync('closed', this._onClosed, this)
.onAsync('datasetRendered', this._onDatasetRendered, this);
.onSync('suggestionClicked', this._onSuggestionClicked, this)
.onSync('cursorMoved', this._onCursorMoved, this)
.onSync('cursorRemoved', this._onCursorRemoved, this)
.onSync('opened', this._onOpened, this)
.onSync('closed', this._onClosed, this)
.onAsync('datasetRendered', this._onDatasetRendered, this);
this.input = new Typeahead.Input({input: $input, hint: $hint})
.onSync('focused', this._onFocused, this)
.onSync('blurred', this._onBlurred, this)
.onSync('enterKeyed', this._onEnterKeyed, this)
.onSync('tabKeyed', this._onTabKeyed, this)
.onSync('escKeyed', this._onEscKeyed, this)
.onSync('upKeyed', this._onUpKeyed, this)
.onSync('downKeyed', this._onDownKeyed, this)
.onSync('leftKeyed', this._onLeftKeyed, this)
.onSync('rightKeyed', this._onRightKeyed, this)
.onSync('queryChanged', this._onQueryChanged, this)
.onSync('whitespaceChanged', this._onWhitespaceChanged, this);
.onSync('focused', this._onFocused, this)
.onSync('blurred', this._onBlurred, this)
.onSync('enterKeyed', this._onEnterKeyed, this)
.onSync('tabKeyed', this._onTabKeyed, this)
.onSync('escKeyed', this._onEscKeyed, this)
.onSync('upKeyed', this._onUpKeyed, this)
.onSync('downKeyed', this._onDownKeyed, this)
.onSync('leftKeyed', this._onLeftKeyed, this)
.onSync('rightKeyed', this._onRightKeyed, this)
.onSync('queryChanged', this._onQueryChanged, this)
.onSync('whitespaceChanged', this._onWhitespaceChanged, this);

@@ -368,3 +366,3 @@ this._setLanguageDirection();

if (options.templates && options.templates.dropdownMenu) {
$dropdown.html((_.templatify(options.templates.dropdownMenu))());
$dropdown.html(_.templatify(options.templates.dropdownMenu)());
}

@@ -374,8 +372,8 @@ $hint = $input.clone().css(css.hint).css(getBackgroundStyles($input));

$hint
.val('')
.removeData()
.addClass('aa-hint')
.removeAttr('id name placeholder required')
.prop('readonly', true)
.attr({autocomplete: 'off', spellcheck: 'false', tabindex: -1});
.val('')
.removeData()
.addClass('aa-hint')
.removeAttr('id name placeholder required')
.prop('readonly', true)
.attr({autocomplete: 'off', spellcheck: 'false', tabindex: -1});

@@ -392,5 +390,5 @@ // store the original values of the attrs that get modified

$input
.addClass('aa-input')
.attr({autocomplete: 'off', spellcheck: false})
.css(options.hint ? css.input : css.inputWithNoHint);
.addClass('aa-input')
.attr({autocomplete: 'off', spellcheck: false})
.css(options.hint ? css.input : css.inputWithNoHint);

@@ -407,6 +405,6 @@ // ie7 does not like it when dir is set to auto

return $input
.wrap($wrapper)
.parent()
.prepend(options.hint ? $hint : null)
.append($dropdown);
.wrap($wrapper)
.parent()
.prepend(options.hint ? $hint : null)
.append($dropdown);
}

@@ -433,3 +431,3 @@

_.each($input.data(attrsKey), function(val, key) {
if (_.isUndefined(val)) {
if (val === undefined) {
$input.removeAttr(key);

@@ -442,6 +440,6 @@ } else {

$input
.detach()
.removeData(attrsKey)
.removeClass('aa-input')
.insertAfter($node);
.detach()
.removeData(attrsKey)
.removeClass('aa-input')
.insertAfter($node);

@@ -448,0 +446,0 @@ $node.remove();

50

src/common/utils.js
'use strict';
/* eslint-env jquery */
module.exports = {

@@ -19,44 +17,28 @@ isMsie: function() {

isArray: $.isArray,
isArray: require('lodash-compat/lang/isArray'),
isFunction: $.isFunction,
isFunction: require('lodash-compat/lang/isFunction'),
isObject: $.isPlainObject,
isObject: require('lodash-compat/lang/isPlainObject'),
isUndefined: function(obj) { return typeof obj === 'undefined'; },
toStr: function toStr(s) {
return this.isUndefined(s) || s === null ? '' : s + '';
return s === undefined || s === null ? '' : s + '';
},
bind: $.proxy,
bind: require('lodash-compat/function/bind'),
each: function(collection, cb) {
// stupid argument order for jQuery.each
$.each(collection, reverseArgs);
each: require('lodash-compat/collection/forEach'),
function reverseArgs(index, value) { return cb(value, index); }
},
map: require('lodash-compat/collection/map'),
map: $.map,
filter: require('lodash-compat/collection/filter'),
filter: $.grep,
error: function(msg) {
throw new Error(msg);
},
every: function(obj, test) {
var result = true;
every: require('lodash-compat/collection/every'),
if (!obj) { return result; }
mixin: require('lodash-compat/object/assign'),
$.each(obj, function(key, val) {
result = test.call(null, val, key, obj);
if (!result) {
return false;
}
});
return !!result;
},
mixin: $.extend,
getUniqueId: (function() {

@@ -68,3 +50,5 @@ var counter = 0;

templatify: function templatify(obj) {
if ($.isFunction(obj)) {
var isFunction = require('lodash-compat/lang/isFunction');
if (isFunction(obj)) {
return obj;

@@ -74,3 +58,3 @@ }

if ($template.prop('tagName') === 'SCRIPT') {
return function template() { return $template.text() };
return function template() { return $template.text(); };
}

@@ -77,0 +61,0 @@ return function template() { return String(obj); };

53

test/fixtures.js

@@ -0,1 +1,3 @@

'use strict';
var fixtures = {};

@@ -5,13 +7,13 @@

simple: [
{ value: 'big' },
{ value: 'bigger' },
{ value: 'biggest' },
{ value: 'small' },
{ value: 'smaller' },
{ value: 'smallest' }
{value: 'big'},
{value: 'bigger'},
{value: 'biggest'},
{value: 'small'},
{value: 'smaller'},
{value: 'smallest'}
],
animals: [
{ value: 'dog' },
{ value: 'cat' },
{ value: 'moose' }
{value: 'dog'},
{value: 'cat'},
{value: 'moose'}
]

@@ -22,2 +24,3 @@ };

textInput: '<input type="text">',
angularTextInput: '<input type="text" ng-model="q" autocomplete aa-datasets="getDatasets()">',
input: '<input class="aa-input" type="text" autocomplete="false" spellcheck="false">',

@@ -28,13 +31,13 @@ hint: '<input class="aa-hint" type="text" autocomplete="false" spellcheck="false" disabled>',

'<script type="text/template" id="my-custom-menu-template">',
'<div class="my-custom-menu">',
'<div class="row">',
'<div class="col-sm-6">',
'<div class="aa-dataset-contacts1"></div>',
'</div>',
'<div class="col-sm-6">',
'<div class="aa-dataset-contacts2"></div>',
'<div class="aa-dataset-contacts3"></div>',
'</div>',
'</div>',
'</div>',
'<div class="my-custom-menu">',
'<div class="row">',
'<div class="col-sm-6">',
'<div class="aa-dataset-contacts1"></div>',
'</div>',
'<div class="col-sm-6">',
'<div class="aa-dataset-contacts2"></div>',
'<div class="aa-dataset-contacts3"></div>',
'</div>',
'</div>',
'</div>',
'</script>'

@@ -44,7 +47,7 @@ ].join(''),

'<div class="aa-dataset-test">',
'<span class="aa-suggestions">',
'<div class="aa-suggestion"><p>one</p></div>',
'<div class="aa-suggestion"><p>two</p></div>',
'<div class="aa-suggestion"><p>three</p></div>',
'</span>',
'<span class="aa-suggestions">',
'<div class="aa-suggestion"><p>one</p></div>',
'<div class="aa-suggestion"><p>two</p></div>',
'<div class="aa-suggestion"><p>three</p></div>',
'</span>',
'</div>'

@@ -51,0 +54,0 @@ ].join('')

2

test/helpers/waits_for.js

@@ -18,3 +18,3 @@ 'use strict';

// clear the interval and the timeout
function clearMe(){
function clearMe() {
clearInterval(interval);

@@ -21,0 +21,0 @@ clearTimeout(timeOut);

25

test/integration/test.js

@@ -5,9 +5,10 @@ 'use strict';

var wd = require('yiewd'),
colors = require('colors'),
expect = require('chai').expect,
f = require('util').format,
env = process.env;
var wd = require('yiewd');
var colors = require('colors');
var expect = require('chai').expect;
var f = require('util').format;
var env = process.env;
var browser, caps;
var browser;
var caps;

@@ -32,3 +33,8 @@ browser = (process.env.BROWSER || 'chrome').split(':');

describe('jquery-typeahead.js', function() {
var driver, body, input, hint, dropdown, allPassed = true;
var driver;
var body;
var input;
var hint;
var dropdown;
var allPassed = true;

@@ -38,3 +44,6 @@ this.timeout(300000);

before(function(done) {
var host = 'ondemand.saucelabs.com', port = 80, username, password;
var host = 'ondemand.saucelabs.com';
var port = 80;
var username;
var password;

@@ -41,0 +50,0 @@ if (env['CI']) {

24

test/unit/dataset_spec.js

@@ -20,3 +20,5 @@ 'use strict';

function noSource() { new Dataset(); }
function noSource() {
new Dataset();
}
});

@@ -28,3 +30,3 @@

function fn() {
var d = new Dataset({ name: 'a space', source: $.noop });
var d = new Dataset({name: 'a space', source: $.noop});
}

@@ -314,5 +316,5 @@ });

cb([
{ value: 'one', raw: { value: 'one' } },
{ value: 'two', raw: { value: 'two' } },
{ value: 'three', raw: { value: 'three' } }
{value: 'one', raw: {value: 'one'}},
{value: 'two', raw: {value: 'two'}},
{value: 'three', raw: {value: 'three'}}
]);

@@ -322,3 +324,3 @@ }

function fakeGetForDisplayFn(query, cb) {
cb([{ display: '4' }, { display: '5' }, { display: '6' } ]);
cb([{display: '4'}, {display: '5'}, {display: '6'}]);
}

@@ -336,5 +338,5 @@

cb([
{ value: 'one', raw: { value: 'one' } },
{ value: 'two', raw: { value: 'two' } },
{ value: 'three', raw: { value: 'three' } }
{value: 'one', raw: {value: 'one'}},
{value: 'two', raw: {value: 'two'}},
{value: 'three', raw: {value: 'three'}}
], 42, true, false);

@@ -346,4 +348,4 @@ }

cb([
{ value: 'four', raw: { value: 'four' } },
{ value: 'five', raw: { value: 'five' } },
{value: 'four', raw: {value: 'four'}},
{value: 'five', raw: {value: 'five'}}
]);

@@ -350,0 +352,0 @@ }, 0);

38

test/unit/dropdown_spec.js

@@ -23,3 +23,3 @@ 'use strict';

this.view = new Dropdown({ menu: this.$menu, datasets: [{}] });
this.view = new Dropdown({menu: this.$menu, datasets: [{}]});
this.dataset = this.view.datasets[0];

@@ -32,4 +32,9 @@ });

function noMenu() { new Dropdown({ menu: '.menu' }); }
function noDatasets() { new Dropdown({ datasets: true }); }
function noMenu() {
new Dropdown({menu: '.menu'});
}
function noDatasets() {
new Dropdown({datasets: true});
}
});

@@ -73,3 +78,4 @@

it('should remove pre-existing cursor', function() {
var $first, $last;
var $first;
var $last;

@@ -96,3 +102,4 @@ $first = this.$menu.find('.aa-suggestion').first();

it('should not trigger cursorMoved', function() {
var spy, $suggestion;
var spy;
var $suggestion;

@@ -221,3 +228,4 @@ this.view.onSync('cursorMoved', spy = jasmine.createSpy());

it('should move the cursor up', function() {
var $first, $second;
var $first;
var $second;

@@ -258,3 +266,4 @@ $first = this.view._getSuggestions().eq(0);

it('should move the cursor down', function() {
var $first, $second;
var $first;
var $second;

@@ -291,8 +300,9 @@ $first = this.view._getSuggestions().eq(0);

it('should extract the datum from the suggestion element', function() {
var $suggestion, datum;
var $suggestion;
var datum;
$suggestion = $('<div>').data({ aaValue: 'one', aaDatum: 'two' });
$suggestion = $('<div>').data({aaValue: 'one', aaDatum: 'two'});
datum = this.view.getDatumForSuggestion($suggestion);
expect(datum).toEqual({ value: 'one', raw: 'two', datasetName: undefined });
expect(datum).toEqual({value: 'one', raw: 'two', datasetName: undefined});
});

@@ -310,7 +320,7 @@

$first = this.view._getSuggestions().eq(0);
$first.data({ aaValue: 'one', aaDatum: 'two' });
$first.data({aaValue: 'one', aaDatum: 'two'});
this.view._setCursor($first);
expect(this.view.getDatumForCursor())
.toEqual({ value: 'one', raw: 'two', datasetName: undefined });
.toEqual({value: 'one', raw: 'two', datasetName: undefined});
});

@@ -324,6 +334,6 @@ });

$first = this.view._getSuggestions().eq(0);
$first.data({ aaValue: 'one', aaDatum: 'two' });
$first.data({aaValue: 'one', aaDatum: 'two'});
expect(this.view.getDatumForTopSuggestion())
.toEqual({ value: 'one', raw: 'two', datasetName: undefined });
.toEqual({value: 'one', raw: 'two', datasetName: undefined});
});

@@ -330,0 +340,0 @@ });

57

test/unit/event_emitter_spec.js

@@ -25,3 +25,4 @@ 'use strict';

it('#on should take the context a callback should be called in', function(done) {
var context = { val: 3 }, cbContext;
var context = {val: 3};
var cbContext;

@@ -32,4 +33,9 @@ this.target.onSync('xevent', setCbContext, context).trigger('xevent');

function setCbContext() { cbContext = this; }
function assertCbContext() { return cbContext === context; }
function setCbContext() {
cbContext = this;
}
function assertCbContext() {
return cbContext === context;
}
});

@@ -52,6 +58,6 @@

this.target
.onSync('event1 event2', this.spy)
.onAsync('event1 event2', this.spy)
.off('event1 event2')
.trigger('event1 event2');
.onSync('event1 event2', this.spy)
.onAsync('event1 event2', this.spy)
.off('event1 event2')
.trigger('event1 event2');

@@ -63,5 +69,5 @@ setTimeout(assertCallCount(this.spy, 0, done), 100);

this.target
.onSync('event1 event2', this.spy)
.onAsync('event1 event2', this.spy)
.trigger('event1 event2');
.onSync('event1 event2', this.spy)
.onAsync('event1 event2', this.spy)
.trigger('event1 event2');

@@ -74,5 +80,5 @@ expect(this.spy.calls.count()).toBe(2);

this.target
.onSync('sync', this.spy)
.onAsync('async', this.spy)
.trigger('sync async');
.onSync('sync', this.spy)
.onAsync('async', this.spy)
.trigger('sync async');

@@ -87,5 +93,5 @@ var that = this;

this.target
.onSync('event', this.spy)
.onAsync('event', this.spy)
.trigger('event', 1, 2);
.onSync('event', this.spy)
.onAsync('event', this.spy)
.trigger('event', 1, 2);

@@ -102,9 +108,9 @@ var that = this;

this.target
.onSync('one', cancelSpy)
.onSync('one', this.spy)
.onAsync('two', cancelSpy)
.onAsync('two', this.spy)
.onSync('three', cancelSpy)
.onAsync('three', this.spy)
.trigger('one two three');
.onSync('one', cancelSpy)
.onSync('one', this.spy)
.onAsync('two', cancelSpy)
.onAsync('two', this.spy)
.onSync('three', cancelSpy)
.onAsync('three', this.spy)
.trigger('one two three');

@@ -116,3 +122,5 @@ var that = this;

function cancel() { return false; }
function cancel() {
return false;
}
});

@@ -133,3 +141,2 @@

}
});

24

test/unit/input_spec.js

@@ -14,3 +14,3 @@ 'use strict';

KEYS = {
KEYS = {
enter: 13,

@@ -35,3 +35,3 @@ esc: 27,

this.view = new Input({ input: this.$input, hint: this.$hint });
this.view = new Input({input: this.$input, hint: this.$hint});
});

@@ -42,3 +42,5 @@

function noInput() { new Input({ hint: '.hint' }); }
function noInput() {
new Input({hint: '.hint'});
}
});

@@ -275,3 +277,4 @@

it('should trigger {query|whitespace}Changed when applicable', function() {
var spy1, spy2;
var spy1;
var spy2;

@@ -396,3 +399,4 @@ this.view.onSync('queryChanged', spy1 = jasmine.createSpy());

it('should remove event handlers', function() {
var $input, $hint;
var $input;
var $hint;

@@ -424,3 +428,4 @@ $hint = this.view.$hint;

function simulateInputEvent($node) {
var $e, type;
var $e;
var type;

@@ -451,3 +456,4 @@ type = _.isMsie() ? 'keypress' : 'input';

function setCursorPosition($input, pos) {
var input = $input[0], range;
var input = $input[0];
var range;

@@ -457,5 +463,3 @@ if (input.setSelectionRange) {

input.setSelectionRange(pos, pos);
}
else if (input.createTextRange) {
} else if (input.createTextRange) {
range = input.createTextRange();

@@ -462,0 +466,0 @@ range.collapse(true);

79

test/unit/typeahead_spec.js

@@ -8,4 +8,4 @@ 'use strict';

var Typeahead = require('../../src/autocomplete/typeahead.js');
var $autocomplete = require('../../src/autocomplete/plugin.js');
var fixtures = require('../fixtures.js');
var mocks = require('../helpers/mocks.js');

@@ -21,3 +21,4 @@ var waitsForAndRuns = require('../helpers/waits_for.js');

beforeEach(function() {
var $fixture, $input;
var $fixture;
var $input;

@@ -47,5 +48,6 @@ setFixtures(fixtures.html.textInput);

it('should select the datum', function(done) {
var $e, spy;
var $e;
var spy;
this.$input.on('typeahead:selected', spy = jasmine.createSpy());
this.$input.on('autocomplete:selected', spy = jasmine.createSpy());
this.dropdown.trigger('suggestionClicked');

@@ -56,3 +58,3 @@

expect(this.input.setInputValue)
.toHaveBeenCalledWith(testDatum.value, true);
.toHaveBeenCalledWith(testDatum.value, true);

@@ -73,3 +75,3 @@ var that = this;

expect(this.input.setInputValue)
.toHaveBeenCalledWith(testDatum.value, true);
.toHaveBeenCalledWith(testDatum.value, true);
});

@@ -80,3 +82,3 @@

this.$input.on('typeahead:cursorchanged', spy = jasmine.createSpy());
this.$input.on('autocomplete:cursorchanged', spy = jasmine.createSpy());

@@ -140,6 +142,6 @@ this.dropdown.trigger('cursorMoved');

it('should trigger typeahead:opened', function() {
it('should trigger autocomplete:opened', function() {
var spy;
this.$input.on('typeahead:opened', spy = jasmine.createSpy());
this.$input.on('autocomplete:opened', spy = jasmine.createSpy());

@@ -159,6 +161,6 @@ this.dropdown.trigger('opened');

it('should trigger typeahead:closed', function() {
it('should trigger autocomplete:closed', function() {
var spy;
this.$input.on('typeahead:closed', spy = jasmine.createSpy());
this.$input.on('autocomplete:closed', spy = jasmine.createSpy());

@@ -216,3 +218,2 @@ this.dropdown.trigger('closed');

this.input = this.view.input;
});

@@ -241,6 +242,7 @@

it('should select the datum', function(done) {
var $e, spy;
var $e;
var spy;
$e = jasmine.createSpyObj('event', ['preventDefault']);
this.$input.on('typeahead:selected', spy = jasmine.createSpy());
this.$input.on('autocomplete:selected', spy = jasmine.createSpy());
this.input.trigger('enterKeyed', $e);

@@ -251,3 +253,3 @@

expect(this.input.setInputValue)
.toHaveBeenCalledWith(testDatum.value, true);
.toHaveBeenCalledWith(testDatum.value, true);

@@ -275,6 +277,7 @@ var that = this;

it('should select the datum', function(done) {
var $e, spy;
var $e;
var spy;
$e = jasmine.createSpyObj('event', ['preventDefault']);
this.$input.on('typeahead:selected', spy = jasmine.createSpy());
this.$input.on('autocomplete:selected', spy = jasmine.createSpy());
this.input.trigger('tabKeyed', $e);

@@ -285,3 +288,3 @@

expect(this.input.setInputValue)
.toHaveBeenCalledWith(testDatum.value, true);
.toHaveBeenCalledWith(testDatum.value, true);

@@ -310,3 +313,3 @@ var that = this;

this.dropdown.getDatumForTopSuggestion.and.returnValue(testDatum);
this.$input.on('typeahead:autocompleted', spy = jasmine.createSpy());
this.$input.on('autocomplete:autocompleted', spy = jasmine.createSpy());

@@ -470,3 +473,3 @@ this.input.trigger('tabKeyed');

this.dropdown.getDatumForTopSuggestion.and.returnValue(testDatum);
this.$input.on('typeahead:autocompleted', spy = jasmine.createSpy());
this.$input.on('autocomplete:autocompleted', spy = jasmine.createSpy());

@@ -489,3 +492,3 @@ this.input.trigger('leftKeyed');

this.dropdown.getDatumForTopSuggestion.and.returnValue(testDatum);
this.$input.on('typeahead:autocompleted', spy = jasmine.createSpy());
this.$input.on('autocomplete:autocompleted', spy = jasmine.createSpy());

@@ -536,3 +539,3 @@ this.input.trigger('rightKeyed');

expect(this.view.dir).toBe('rtl');
expect(this.view.$node).toHaveCss({ direction: 'rtl' });
expect(this.view.$node).toHaveCss({direction: 'rtl'});
expect(this.dropdown.setLanguageDirection).toHaveBeenCalledWith('rtl');

@@ -650,3 +653,2 @@ });

});
});

@@ -659,33 +661,2 @@

});
describe('when instantiated from jquery', function() {
beforeEach(function() {
this.view.destroy();
this.view = $autocomplete.call($('input'), {}, {
name: 'test',
source: function(q, cb) {
cb([ { name: 'test' } ]);
},
templates: {
suggestion: function(sugg) {
return sugg.name;
}
}
}).data('aaAutocomplete');
});
it('should initialize', function() {
var $fixture = $('#jasmine-fixtures');
expect($fixture.find('.aa-dropdown-menu').length).toEqual(1);
});
it('should open the dropdown', function() {
var $fixture = $('#jasmine-fixtures');
this.view.input.getInputValue.and.returnValue('test');
$autocomplete.call($('input'), 'val', 'test');
$autocomplete.call($('input'), 'open');
$autocomplete.call($('input'), 'close');
});
});
});
src/autocomplete/plugin.js
.eslintrc

Sorry, the diff of this file is not supported yet

.gitattributes

Sorry, the diff of this file is not supported yet

.travis.yml

Sorry, the diff of this file is not supported yet

dist/autocomplete.jquery.js

Sorry, the diff of this file is too big to display

dist/autocomplete.jquery.min.js

Sorry, the diff of this file is too big to display

test/playground.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc