JSFiddle - React, Tailwind, and code Playground
HTML
ex.<input type="text" class="form-control" id="light-autocomplete" autocomplete="off" placeholder="ローマ字で都市名を入力">
JavaScript
/*!
* light-autocomplete v1.0
* by Lorenzo Dessimoni
*
* More info:
* https://github.com/FunkyOz/light-autocomplete
*
* Copyright 20017 Lorenzo Dessimoni
* Released under the MIT license
* https://github.com/FunkyOz/light-autocomplete
*
* @preserve
*/
(function ($) {
'use strict';
var keys = {
ENTER: 13,
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40,
TAB: 9,
ESC: 27
};
function LightAutocomplete(input, options) {
this.options = options;
this.$input = $(input);
var that = this;
that.classes = {
list: 'light-autocomplete-list',
element: 'light-autocomplete-element',
container: 'light-autocomplete-container'
},
that.selectors ={
list: '.light-autocomplete-list ul',
element: '.' + that.classes.element,
container: '.' + that.classes.container
},
that.id = '',
that.search = '',
that.last = 0,
that.firstItem = 1,
that.data = [],
that.defaults = {
minChars: 1,
heightOfElement: 50,
visibleElementInList: 5,
minSize: 6,
onClick: function(item) {
that.setItem(item);
},
onPressEnter: function(item) {
that.setItem(item);
},
onPressTab: function(item) {
that.setItem(item);
},
onPressEsc: function(item) {
that.setItem(item);
}
};
that.init();
};
$.LightAutocomplete = LightAutocomplete;
LightAutocomplete.prototype = {
init: function() {
var that = this;
that.defaults = $.extend({}, that.defaults, that.options);
that.defaults.maxHeight = that.defaults.heightOfElement * that.defaults.visibleElementInList;
if(typeof(that.$input.attr('id')) !== 'undefined' && that.$input.attr('id') !== null) {
that.id = '#' + that.$input.attr('id');
} else {
that.id = 'light-autocomplete-' + Math.ceil(Math.random() * 1000000);
that.$input.attr('id', that.id);
that.id = '#' + that.id;
}
that.$input.attr('autocomplete',...