一、效果如下（样式根据项目自动调整）
二、HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../media/js/jquery-3.5.1.js" type="text/javascript"></script>
<script src="../media/js/jquery-autocomplete/jquery.autocompleter.js"></script>
<link type="text/css" href="../media/js/jquery-autocomplete/autocomplete.css" rel="stylesheet" />
</head>
<body>
<div class="field" style="300px;">
<input type="text" id="selectcustom" />
</div>
<div id="Show">
</div>
</body>
</html>
<script>
var websites = [{ "F_CustomName": "上海晨希医疗美容门诊部有限公司", "F_BillName": "上海晨希医疗美容门诊部有限公司", "label": "上海晨希医疗美容门诊部有限公司" }, { "F_CustomName": "上海晨希医疗美容门诊部有限公司22", "F_BillName": "上海晨希医疗美容门诊部有限公司22", "label": "上海晨希医疗美容门诊部有限公司22" }, { "F_CustomName": "海南美咖医疗科技有限公司", "F_BillName": "海南美咖医疗科技有限公司", "label": "海南美咖医疗科技有限公司" }, { "F_CustomName": "山西脸蛋汇咖医疗科技有限公司小店长治路医疗美容诊所", "F_BillName": "山西脸蛋汇咖医疗科技有限公司小店长治路医疗美容诊所", "label": "山西脸蛋汇咖医疗科技有限公司小店长治路医疗美容诊所" }];
$('#selectcustom').autocompleter({
// marker for autocomplete matches
highlightMatches: true,
// object to local or url to remote search
source: websites,
// custom template
template: '<div>{{ F_CustomName }}</div><div>开票单位：{{ F_BillName }}</div>',
// show hint
hint: false,
// abort source if empty field
empty: false,
// max results
limit: 10,
callback: function (value, index, selected) {
if (selected) {
console.log('value');
console.log(value);
console.log('index');
console.log(index);
console.log('selected');
console.log(selected);
//$('.icon').css('background-color', selected.hex);
$('#Show').text(value);
}
}
});
</script>
三、jquery.autocompleter.js
/* * Autocompleter v0.1.2.1 - 2014-05-23 * Simple, easy, customisable and with cache support. * http://github.com/ArtemFitiskin/jquery-autocompleter * * Copyright 2014 Artem Fitiskin; MIT Licensed */ ;(function ($, window) { "use strict"; var guid = 0, ignoredKeyCode = [9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145], allowOptions = ['source', 'empty', 'limit', 'cache', 'focusOpen', 'selectFirst', 'changeWhenSelect', 'highlightMatches', 'ignoredKeyCode', 'customLabel', 'customValue', 'template', 'offset', 'combine', 'callback'], userAgent = (window.navigator.userAgent||window.navigator.vendor||window.opera), isFirefox = /Firefox/i.test(userAgent), isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(userAgent), isFirefoxMobile = (isFirefox && isMobile), $body = null, localStorageKey = 'autocompleterCache', supportLocalStorage = (function () { var supported = typeof window.localStorage !== 'undefined'; if (supported) { try { localStorage.setItem("autocompleter", "autocompleter"); localStorage.removeItem("autocompleter"); } catch (e) { supported = false; } } return supported; })(); /** * @options * @param source [(string|object)] <null> "URL to the server or a local object" * @param empty [boolean] <true> "Launch if value is empty" * @param limit [int] <10> "Number of results to be displayed" * @param customClass [array] <[]> "Array with custom classes for autocompleter element" * @param cache [boolean] <true> "Save xhr data to localStorage to avoid the repetition of requests" * @param focusOpen [boolean] <true> "Launch autocompleter when input gets focus" * @param hint [boolean] <false> "Add hint to input with first matched label, correct styles should be installed" * @param selectFirst [boolean] <false> "If set to true, first element in autocomplete list will be selected automatically, ignore if changeWhenSelect is on" * @param changeWhenSelect [boolean] <true> "Allows to change input value using arrow keys navigation in autocomplete list" * @param highlightMatches [boolean] <false> "This option defines <strong> tag wrap for matches in autocomplete results" * @param ignoredKeyCode [array] <[]> "Array with ignorable keycodes" * @param customLabel [boolean] <false> "The name of object's property which will be used as a label" * @param customValue [boolean] <false> "The name of object's property which will be used as a value" * @param template [(string|boolean)] <false> "Custom template for list items" * @param offset [(string|boolean)] <false> "Source response offset, for example: response.items.posts" * @param combine [function] <$.noop> "Returns an object which extends ajax data. Useful if you want to pass some additional server options" * @param callback [function] <$.noop> "Select value callback function. Arguments: value, index" */ var options = { source: null, empty: true, limit: 10, customClass: [], cache: true, focusOpen: true, hint: false, selectFirst: false, changeWhenSelect: true, highlightMatches: false, ignoredKeyCode: [], customLabel: false, customValue: false, template: false, offset: false, combine: $.noop, callback: $.noop }; var publics = { /** * @method * @name defaults * @description Sets default plugin options * @param opts [object] <{}> "Options object" * @example $.autocompleter("defaults", opts); */ defaults: function (opts) { options = $.extend(options, opts || {}); return $(this); }, /** * @method * @name option * @description Open autocompleter list */ option: function (properties) { return $(this).each(function(i, input) { var data = $(input).next(".autocompleter").data("autocompleter"); for (var property in properties) { if ($.inArray(property, allowOptions) !== -1) { data[property] = properties[property]; } } }); }, /** * @method * @name open * @description Open autocompleter list */ open: function () { return $(this).each(function(i, input) { var data = $(input).next(".autocompleter").data("autocompleter"); if (data) { _open(null, data); } }); }, /** * @method * @name close * @description Close autocompleter list */ close: function () { return $(this).each(function(i, input) { var data = $(input).next(".autocompleter").data("autocompleter"); if (data) { _close(null, data); } }); }, /** * @method * @name clearCache * @description Remove localStorage cache */ clearCache: function () { _deleteCache(); }, /** * @method * @name destroy * @description Removes instance of plugin * @example $(".target").autocompleter("destroy"); */ destroy: function () { return $(this).each(function (i, input) { var data = $(input).next(".autocompleter").data("autocompleter"); if (data) { // Abort xhr if (data.jqxhr) { data.jqxhr.abort(); } // If has selected item & open - confirm it if (data.$autocompleter.hasClass("open")) { data.$autocompleter.find(".autocompleter-selected") .trigger("click.autocompleter"); } // Restore original autocomplete attr if(!data.originalAutocomplete) { data.$node.removeAttr("autocomplete"); } else { data.$node.attr("autocomplete", data.originalAutocomplete); } // Remove autocompleter & unbind events data.$node.off(".autocompleter") .removeClass("autocompleter-node"); data.$autocompleter.off(".autocompleter") .remove(); } }); } }; /** * @method private * @name _init * @description Initializes plugin * @param opts [object] "Initialization options" */ function _init(opts) { // Local options opts = $.extend({}, options, opts || {}); // Check for Body if ($body === null) { $body = $("body"); } // Apply to each element var $items = $(this); for (var i = 0, count = $items.length; i < count; i++) { _build($items.eq(i), opts); } return $items; } /** * @method private * @name _build * @description Builds each instance * @param $node [jQuery object] "Target jQuery object" * @param opts [object] <{}> "Options object" */ function _build($node, opts) { if (!$node.hasClass("autocompleter-node")) { // Extend options opts = $.extend({}, opts, $node.data("autocompleter-options")); var html = '<div class="autocompleter '+opts.customClass.join(' ')+'" id="autocompleter-'+(guid+1)+'">'; if (opts.hint) { html += '<div class="autocompleter-hint"></div>'; } html += '<ul class="autocompleter-list"></ul>'; html += '</div>'; $node.addClass("autocompleter-node") .after(html); var $autocompleter = $node.next(".autocompleter").eq(0); // Set autocomplete to off for warn overlay var originalAutocomplete = $node.attr("autocomplete"); $node.attr("autocomplete", "off"); // Store plugin data var data = $.extend({ $node: $node, $autocompleter: $autocompleter, $selected: null, $list: null, index: -1, hintText: false, source: false, jqxhr: false, response: null, focused: false, query: '', originalAutocomplete: originalAutocomplete, guid: guid++ }, opts); // Bind autocompleter events data.$autocompleter.on("mousedown.autocompleter", ".autocompleter-item", data, _select) .data("autocompleter", data); // Bind node events data.$node.on("keyup.autocompleter", data, _onKeyup) .on("keydown.autocompleter", data, _onKeydownHelper) .on("focus.autocompleter", data, _onFocus) .on("blur.autocompleter", data, _onBlur) .on("mousedown.autocompleter", data, _onMousedown); } } /** * @method private * @name _search * @description Local search function, return best collation * @param query [string] "Query string" * @param source [object] "Source data" * @param limit [integer] "Results length" */ function _search(query, source, limit) { var response = []; query = query.toUpperCase(); if (source.length) { for (var i = 0; i < 2; i++) { for (var item in source) { if (response.length < limit) { switch (i) { case 0: if (source[item].label.toUpperCase().search(query) === 0) { response.push(source[item]); delete source[item]; } break; case 1: if (source[item].label.toUpperCase().search(query) !== -1) { response.push(source[item]); delete source[item]; } break; } } } } } return response; } /** * @method private * @name _launch * @description Use source locally or create xhr * @param data [object] "Instance data" */ function _launch(data) { data.query = $.trim(data.$node.val()); if (!data.empty && data.query.length === 0) { _clear(data); return; } else { if (typeof data.source === 'object') { _clear(data); // Local search var search = _search(data.query, _clone(data.source), data.limit); if (search.length) { _response(search, data); } } else { if (data.jqxhr) { data.jqxhr.abort(); } var ajaxData = $.extend({ limit: data.limit, query: data.query }, data.combine()); data.jqxhr = $.ajax({ url: data.source, dataType: "json", data: ajaxData, beforeSend: function (xhr) { data.$autocompleter.addClass('autocompleter-ajax'); _clear(data); if (data.cache) { var stored = _getCache(this.url); if (stored) { xhr.abort(); _response(stored, data); } } } }) .done(function (response) { // Get subobject from responce if (data.offset) { response = _grab(response, data.offset); } if (data.cache) { _setCache(this.url, response); } _response(response, data); }) .always(function () { data.$autocompleter.removeClass('autocompleter-ajax'); }); } } } /** * @method private * @name _clear * @param data [object] "Instance data" */ function _clear(data) { // Clear data data.response = null; data.$list = null; data.$selected = null; data.index = 0; data.$autocompleter.find(".autocompleter-list").empty(); data.$autocompleter.find('.autocompleter-hint').removeClass('autocompleter-hint-show').empty(); data.hintText = false; _close(null, data); } /** * @method private * @name _response * @description Main source response function * @param response [object] "Source data" * @param data [object] "Instance data" */ function _response(response, data) { _buildList(response, data); if (data.$autocompleter.hasClass('autocompleter-focus')) { _open(null, data); } } /** * @method private * @name _buildList * @description Generate autocompleter-list and update instance data by source * @param list [object] "Source data" * @param data [object] "Instance data" */ function _buildList(list, data) { var menu = ''; for (var item = 0, count = list.length; item < count; item++) { var classes = ["autocompleter-item"]; if (data.selectFirst && item === 0 && !data.changeWhenSelect) { classes.push("autocompleter-item-selected"); } var highlightReg = new RegExp(data.query, "gi"); var label = (data.customLabel && list[item][data.customLabel]) ? list[item][data.customLabel] : list[item].label; var clear = label; label = data.highlightMatches ? label.replace(highlightReg, "<strong>$&</strong>") : label; var value = (data.customValue && list[item][data.customValue]) ? list[item][data.customValue] : list[item].value; // Apply custom template if (data.template) { var template = data.template.replace(/({{ label }})/gi, label); for (var property in list[item]) { if (list[item].hasOwnProperty(property)) { var regex = new RegExp('{{ '+ property +' }}', 'gi'); template = template.replace(regex, list[item][property]); } } label = template; } console.log(label); if (value) { menu += '<li data-value="'+value+'" data-label="'+clear+'" class="'+classes.join(' ')+'">'+label+'</li>'; } else { menu += '<li data-label="'+clear+'" class="'+classes.join(' ')+'">'+label+'</li>'; } } // Set hint if (list.length && data.hint) { var hint = ( list[0].label.substr(0, data.query.length).toUpperCase() === data.query.toUpperCase() ) ? list[0].label : false; if (hint && (data.query !== list[0].label)) { var hintReg = new RegExp(data.query, "i"); var hintText = hint.replace(hintReg, "<span>"+data.query+"</span>"); data.$autocompleter.find('.autocompleter-hint').addClass('autocompleter-hint-show').html(hintText); data.hintText = hintText; } } // Update data data.response = list; data.$autocompleter.find(".autocompleter-list").html(menu); data.$selected = (data.$autocompleter.find(".autocompleter-item-selected").length) ? data.$autocompleter.find(".autocompleter-item-selected") : null; data.$list = (list.length) ? data.$autocompleter.find(".autocompleter-item") : null; data.index = data.$selected ? data.$list.index(data.$selected) : -1; data.$autocompleter.find(".autocompleter-item").each(function (i, j) { $(j).data(data.response[i]); }); } /** * @method private * @name _onKeyup * @description Keyup events in node, up/down autocompleter-list navigation, typing and enter button callbacks * @param e [object] "Event data" */ function _onKeyup(e) { var data = e.data; var code = e.keyCode ? e.keyCode : e.which; if ( (code === 40 || code === 38) && data.$autocompleter.hasClass('autocompleter-show') ) { // Arrows up & down var len = data.$list.length, next, prev; if (len) { // Determine new index if (len > 1) { if (data.index === len - 1) { next = data.changeWhenSelect ? -1 : 0; prev = data.index - 1; } else if (data.index === 0) { next = data.index + 1; prev = data.changeWhenSelect ? -1 : len - 1; } else if (data.index === -1) { next = 0; prev = len - 1; } else { next = data.index + 1; prev = data.index - 1; } } else if (data.index === -1) { next = 0; prev = 0; } else { prev = -1; next = -1; } data.index = (code === 40) ? next : prev; // Update HTML data.$list.removeClass("autocompleter-item-selected"); if (data.index !== -1) { data.$list.eq(data.index).addClass("autocompleter-item-selected"); } data.$selected = data.$autocompleter.find(".autocompleter-item-selected").length ? data.$autocompleter.find(".autocompleter-item-selected") : null; if (data.changeWhenSelect) { _setValue(data); } } } else if ($.inArray(code, ignoredKeyCode) === -1 && $.inArray(code, data.ignoredKeyCode) === -1) { // Typing _launch(data); } } /** * @method private * @name _onKeydownHelper * @description Keydown events in node, up/down for prevent cursor moving and right arrow for hint * @param e [object] "Event data" */ function _onKeydownHelper(e) { var code = e.keyCode ? e.keyCode : e.which; var data = e.data; if (code === 40 || code === 38 ) { e.preventDefault(); e.stopPropagation(); } else if (code === 39) { // Right arrow if (data.hint && data.hintText && data.$autocompleter.find('.autocompleter-hint').hasClass('autocompleter-hint-show')) { e.preventDefault(); e.stopPropagation(); var hintOrigin = data.$autocompleter.find(".autocompleter-item").length ? data.$autocompleter.find(".autocompleter-item").eq(0).attr('data-label') : false; if (hintOrigin) { data.query = hintOrigin; _setHint(data); } } } else if (code === 13) { // Enter if (data.$autocompleter.hasClass('autocompleter-show') && data.$selected) { _select(e); } } } /** * @method private * @name _onFocus * @description Handles instance focus * @param e [object] "Event data" * @param internal [boolean] "Called by plugin" */ function _onFocus(e, internal) { if (!internal) { var data = e.data; data.$autocompleter.addClass("autocompleter-focus"); if (!data.$node.prop("disabled") && !data.$autocompleter.hasClass('autocompleter-show')) { if (data.focusOpen) { _launch(data); data.focused = true; setTimeout(function () { data.focused = false; }, 500); } } } } /** * @method private * @name _onBlur * @description Handles instance blur * @param e [object] "Event data" * @param internal [boolean] "Called by plugin" */ function _onBlur(e, internal) { e.preventDefault(); e.stopPropagation(); var data = e.data; if (!internal) { data.$autocompleter.removeClass("autocompleter-focus"); _close(e); } } /** * @method private * @name _onMousedown * @description Handles mousedown to node * @param e [object] "Event data" */ function _onMousedown(e) { // Disable middle & right mouse click if (e.type === "mousedown" && $.inArray(e.which, [2, 3]) !== -1) { return; } var data = e.data; if (data.$list && !data.focused) { if (!data.$node.is(":disabled")) { if (isMobile && !isFirefoxMobile) { var el = data.$select[0]; if (window.document.createEvent) { // All var evt = window.document.createEvent("MouseEvents"); evt.initMouseEvent("mousedown", false, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); el.dispatchEvent(evt); } else if (el.fireEvent) { // IE el.fireEvent("onmousedown"); } } else { // Delegate intent if (data.$autocompleter.hasClass("autocompleter-closed")) { _open(e); } else if (data.$autocompleter.hasClass("autocompleter-show")) { _close(e); } } } } } /** * @method private * @name _open * @description Opens option set * @param e [object] "Event data" * @param instanceData [object] "Instance data" */ function _open(e, instanceData) { var data = e ? e.data : instanceData; if (!data.$node.prop("disabled") && !data.$autocompleter.hasClass("autocompleter-show") && data.$list && data.$list.length ) { data.$autocompleter.removeClass("autocompleter-closed").addClass("autocompleter-show"); $body.on("click.autocompleter-" + data.guid, ":not(.autocompleter-item)", data, _closeHelper); } } /** * @method private * @name _closeHelper * @description Determines if event target is outside instance before closing * @param e [object] "Event data" */ function _closeHelper(e) { if ( $(e.target).hasClass('autocompleter-node') ) { return; } if ($(e.currentTarget).parents(".autocompleter").length === 0) { _close(e); } } /** * @method private * @name _close * @description Closes option set * @param e [object] "Event data" * @param instanceData [object] "Instance data" */ function _close(e, instanceData) { var data = e ? e.data : instanceData; if (data.$autocompleter.hasClass("autocompleter-show")) { data.$autocompleter.removeClass("autocompleter-show").addClass("autocompleter-closed"); $body.off(".autocompleter-" + data.guid); } } /** * @method private * @name _select * @description Select item from .autocompleter-list * @param e [object] "Event data" */ function _select(e) { // Disable middle & right mouse click if (e.type === "mousedown" && $.inArray(e.which, [2, 3]) !== -1) { return; } var data = e.data; e.preventDefault(); e.stopPropagation(); if (e.type === "mousedown" && $(this).length) { data.$selected = $(this); data.index = data.$list.index(data.$selected); } if (!data.$node.prop("disabled")) { _close(e); _update(data); if (e.type === "click") { data.$node.trigger("focus", [true]); } } } /** * @method private * @name _setHint * @description Set autocompleter by hint * @param data [object] "Instance data" */ function _setHint(data) { _setValue(data); _handleChange(data); _launch(data); } /** * @method private * @name _setValue * @description Set value for native field * @param data [object] "Instance data" */ function _setValue(data) { if (data.$selected) { if (data.hintText && data.$autocompleter.find('.autocompleter-hint').hasClass('autocompleter-hint-show')) { data.$autocompleter.find('.autocompleter-hint').removeClass('autocompleter-hint-show'); } var value = data.$selected.attr('data-value') ? data.$selected.attr('data-value') : data.$selected.attr('data-label'); data.$node.val(value); } else { if (data.hintText && !data.$autocompleter.find('.autocompleter-hint').hasClass('autocompleter-hint-show')) { data.$autocompleter.find('.autocompleter-hint').addClass('autocompleter-hint-show'); } data.$node.val(data.query); } } /** * @method private * @name _update * @param data [object] "Instance data" */ function _update(data) { _setValue(data); _handleChange(data); _clear(data); } /** * @method private * @name _handleChange * @description Trigger node change event and call the callback function * @param data [object] "Instance data" */ function _handleChange(data) { data.callback.call(data.$autocompleter, data.$node.val(), data.index, data.response[data.index]); data.$node.trigger("change"); } /** * @method private * @name _grab * @description Grab sub-object from object * @param response [object] "Native object" * @param offset [string] "Offset string" */ function _grab(response, offset) { offset = offset.split('.'); while ( response && offset.length ) { response = response[offset.shift()]; } return response; } /** * @method private * @name _getCache * @description Store AJAX response in plugin cache * @param url [string] "AJAX get query string" * @param data [object] "AJAX response data" */ function _setCache(url, data) { if (!supportLocalStorage) { return; } if (url && data) { cache[url] = { value: data }; // Proccess to localStorage try { localStorage.setItem(localStorageKey, JSON.stringify(cache)); } catch (e) { var code = e.code || e.number || e.message; if (code === 22) { _deleteCache(); } else { throw(e); } } } } /** * @method private * @name _getCache * @description Get cached data by url if exist * @param url [string] "AJAX get query string" */ function _getCache(url) { if (!url) { return; } var response = (cache[url] && cache[url].value) ? cache[url].value : false; return response; } /** * @method private * @name _loadCache * @description Load all plugin cache from localStorage */ function _loadCache() { if (!supportLocalStorage) { return; } var json = localStorage.getItem(localStorageKey) || '{}'; return JSON.parse(json); } /** * @method private * @name _deleteCache * @description Delete all plugin cache from localStorage */ function _deleteCache() { try { localStorage.removeItem(localStorageKey); cache = _loadCache(); } catch (e) { throw(e); } } /** * @method private * @name _clone * @description Clone JavaScript object */ function _clone(obj) { if (null === obj || "object" !== typeof obj) { return obj; } var copy = obj.constructor(); for (var attr in obj) { if (obj.hasOwnProperty(attr)) { copy[attr] = obj[attr]; } } return copy; } // Load cache var cache = _loadCache(); $.fn.autocompleter = function (method) { if (publics[method]) { return publics[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return _init.apply(this, arguments); } return this; }; $.autocompleter = function (method) { if (method === "defaults") { publics.defaults.apply(this, Array.prototype.slice.call(arguments, 1)); } else if (method === "clearCache") { publics.clearCache.apply(this, null); } }; })(jQuery, window);
三、autocomplete.css（自行根据项目色调修改）
/** * Custom */ .field { position: relative; } .field input { /* 100%; -webkit-box-sizing: border-box; box-sizing: border-box; color: #000000;*/ height: auto; /*font-size: 24px;*/ /*padding: 0 12px;*/ /*border: 0;*/ } .field input:focus { outline: 0; } /** * Simplecomplete */ .autocompleter { /* 100%;*/ background: #dddddd; position: absolute; /*top: 60px;*/ left: 0; z-index: 100; border: inset 1px #808080; } .autocompleter, .autocompleter-hint { position: absolute; } .autocompleter-list { box-shadow: inset 0px 0px 6px rgba(0,0,0,0.1); list-style: none; margin: 0; padding: 0; text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box; } /*如下是设置偶数行的样式*/ .autocompleter-list li:nth-child(even) { /*background:#dddddd;*/ } /*如下是设置奇数列的样式*/ autocompleter-list td:nth-child(odd) { /*background-color:#bbbbbb;*/ } .autocompleter-item-selected { background: antiquewhite; } .autocompleter-item { padding: 6px 12px; color: #444444; /*font-size: 14px;*/ cursor: pointer; } .autocompleter-item:hover { /*background: #dbed8a;*/ background: antiquewhite; } .autocompleter-item strong { background: #f9de8f; /*text-shadow: 0 1px 0 #ffffff;*/ text-shadow: 0 1px 0 #f00; } .autocompleter-item span { color: #bbbbbb; } .autocompleter-hint { color: #ccc; text-align: left; top: -56px; font-weight: 400; left: 0; 100%; padding: 12px 12px 12px 13px; font-size: 24px; display: none; } .autocompleter-hint span { color: transparent; } .autocompleter-hint-show { display: block; } .autocompleter-closed { display: none; }