npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

materialize-autocomplete

v1.0.7

Published

Materialize-css styled autocomplete

Downloads

848

Readme

materialize-autocomplete

Materialize-css styled autocomplete, examples: https://icefox0801.github.io/materialize-autocomplete/examples/

Install

  • npm
$ npm install materialize-autocomplete
  • bower
$ bower install materialize-autocomplete

Usage

autocomplete

  • When typing inside an input, autocomplete prompts will show on dropdown list
  • Choosing an option by click or , , Enter keys
  • Removing a selection by click x when enable multiple selection
var autocomplete =$('#el').autocomplete({
    limit: 20,
    multiple: {
        enable: true,
        maxSize: 10,
        onExist: function (item) { /* ... */ },
        onExceed: function (maxSize, item) { /* ... */ }
    },
    appender: {
        el: '#someEl'
    },
    getData: function (value, callback) {
        // ...
        callback(value, data);
    }
});

$.fn.materialize_autocomplete

  • $.fn.materialize_autocomplete(options) [function]: Initialize an autocomplete widget and return an Autocomplete instance

Autocomplete options

  • cacheable [boolean]: Dropdown data cacheable or not, default: true
  • limit [number]: Max number of items show in dropdown, default: 10
  • multiple [object]: Configuration of multiple selection, seeing properties of multiple for more details
  • hidden [object]: Configuration of hidden input (used for storing ids joined by selections or id of a selection), seeing properties of hidden for more details
  • appender [object]: Configuration of appender (where to append selections when multiple selection is enabled), seeing properties of appender for more details
  • dropdown [object]: Configuration of dropdown, seeing properties of dropdown for more details
  • onSelect(item) [function]: Callback function after selecting an item in single selection mode
  • getData(value, callback) [function]: Function for getting dropdown list data, asynchronous called with a callback
    • value [string]: Input value,when input event triggered, getData will be called with input value
    • callback(value, data) [function]: Callback function
      • value [string]: Same as value above
      • data [array]: Data array,should be formatted as [{ 'id': '1', 'text': 'a' }, { 'id': '2', 'text': 'b'}]
  • ignoreCase [boolean]: Ignore case or not, default: true
  • throttling [boolean]: Throttling for getData function or not, default: true

Autocomplete

Constructor

  • new Autocomplete(el, options) [function]: Constructor
    • el [string|object]: DOM element on which the widget applys
    • options [object]: Configuration of the widget

Instance property:

  • autocomplete.options [object]: Configuration object
  • autocomplete.$el [object]: JQuery object on which the widget applys
  • autocomplete.$wrapper [object]: Wrapper jQuery object,equal to autocomplete.$el.parent()
  • autocomplete.compiled [object]: Compiling functions for tagTemplate and itemTemplate
  • autocomplete.$dropdown [object]: JQuery object of dropdown
  • autocomplete.$appender [object]: JQuery object of appender
  • autocomplete.$hidden [object]: JQuery object of hidden input
  • autocomplete.resultCache [object]: Result cache object of getData when cacheable is true
  • autocomplete.value [array]: Value of widget, when multiple selection is enabled, autocomplete.value is ids joined by selections, otherswise autocomplete.value is id of a selection

Instance methods:

  • autocomplete.initialize() [function]: Initializing method
  • autocomplete.render() [function]: Rendering method
  • autocomplete.setValue(item) [function]: Value setting method
    • item [object]: Selection object, e.g. { id: '1', text: 'a'}
  • autocomplete.append(item) [function]: Appending an selection, called when options.multiple.enable is true
  • autocomplete.remove(item) [function]: Removing an selection, called when options.multiple.enable is true
  • autocomplete.select(item) [function]: Setting the value, called when options.multiple.enable is false

Detailed options

Properties of multiple

|property|description|default| |:---|:---|:---| |enable [boolean]|Enabled or not|false| |maxSize [number]|Max number of selections|4| |onExist [function]|Callback when selection to append exists|| |onExceed [function]|Callback when selections exceed maxSize|| |onAppend [function]|Callback after appending a selection|| |onRemove [function]|Callback after removing a selection||

Properties of hidden

|property|description|default| |:---|:---|:---| |enable [boolean]|Enabled or not|false| |el [string|object]|Applying an existing DOM element if not null, otherwise created one|''| |inputName [string]|name attribute of hidden input|''| |required [boolean]|required attribute of hidden input|false|

Properties of appender

|property|description|default| |:---|:---|:---| |el [string|object]|Applying an existing DOM element if not null, otherwise created one|''| |tagName [string]|TagName of appender when appender.el is null|ul| |className [string]|ClassName attribute of appender|ac-appender| |tagTemplate [string]|Template string of selections inside appender|| Note that tagTemplate should use undescore template semantic, data-id and data-text attributes should be specified on outest DOM

Properties of dropdown

|property|description|default| |:---|:---|:---| |el [string|object]|Applying an existing DOM element if not null, otherwise created one|''| |tagName [string]|TagName of dropdown when dropdown.el is null|ul| |className [string]|ClassName attribute of dropdown|ac-dropdown| |itemTemplate [string]|Template string of items inside dropdown|| |noItem [string]|Prompt for no data|''| Note that itemTemplate should use undescore template, data-id and data-text attributes should be specified on outest DOM