<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"> </script>
<script> /* * jQuery UI Multicolumn Autocomplete Widget Plugin 2.1 * Copyright (c) 2012-2014 Mark Harmon * * Depends: * - jQuery UI Autocomplete widget * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ $.widget('custom.mcautocomplete', $.ui.autocomplete, { _create: function () { this._super(); this.widget().menu("option", "items", "> :not(.ui-widget-header)"); }, _renderMenu: function (ul, items) { var self = this, thead; if (this.options.showHeader) { table = $('<div class="ui-widget-header" style="width:100%"></div>'); $.each(this.options.columns, function (index, item) { table.append('<span style="padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>'); }); table.append('<div style="clear: both;"></div>'); ul.append(table); } $.each(items, function (index, item) { self._renderItem(ul, item); }); }, _renderItem: function (ul, item) { var t = '', result = ''; $.each(this.options.columns, function (index, column) { var whole_word = item[column.valueField ? column.valueField : index]; var current_search_string = document.getElementById("search").value; // Highlight current search term. var regex = new RegExp( '(' + current_search_string + ')', 'gi' ); whole_word = whole_word.replace( regex, "<b>$1</b>" );
t += '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + whole_word + '</span>'; });
result = $('<li></li>') .data('ui-autocomplete-item', item) .append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>') .appendTo(ul); return result; } });
var columns = [ {name: 'Hexadecimal Code', width: '5.5em'}, {name: 'Name', width: '15em'}, {name: 'RGB', minWidth: '100px'} ]; var colors = [ [ "#EFDECD", "Almond", "(239, 222, 205)" ], [ "#CD9575", "Antique Brass", "(205, 149, 117)" ], [ "#FDD9B5", "Apricot", "(253, 217, 181)" ], [ "#78DBE2", "Aquamarine", "(120, 219, 226)" ], [ "#87A96B", "Asparagus", "(135, 169, 107)" ], [ "#FFA474", "Atomic Tangerine", "(255, 164, 116)" ], [ "#FAE7B5", "Banana Mania", "(250, 231, 181)" ], [ "#9F8170", "Beaver", "(159, 129, 112)" ], [ "#FD7C6E", "Bittersweet", "(253, 124, 110)" ], [ "#000000", "Black", "(0,0,0)" ], [ "#ACE5EE", "Blizzard Blue", "(172, 229, 238)" ], [ "#1F75FE", "Blue", "(31, 117, 254)" ], [ "#A2A2D0", "Blue Bell", "(162, 162, 208)" ], [ "#6699CC", "Blue Gray", "(102, 153, 204)" ], [ "#0D98BA", "Blue Green", "(13, 152, 186)" ], [ "#7366BD", "Blue Violet", "(115, 102, 189)" ], [ "#DE5D83", "Blush", "(222, 93, 131)" ], [ "#CB4154", "Brick Red", "(203, 65, 84)" ], [ "#B4674D", "Brown", "(180, 103, 77)" ], [ "#FF7F49", "Burnt Orange", "(255, 127, 73)" ], [ "#EA7E5D", "Burnt Sienna", "(234, 126, 93)" ], [ "#B0B7C6", "Cadet Blue", "(176, 183, 198)" ], [ "#FFFF99", "Canary", "(255, 255, 153)" ], [ "#1CD3A2", "Caribbean Green", "(28, 211, 162)" ], [ "#FFAACC", "Carnation Pink", "(255, 170, 204)" ], [ "#DD4492", "Cerise", "(221, 68, 146)" ], [ "#1DACD6", "Cerulean", "(29, 172, 214)" ], [ "#BC5D58", "Chestnut", "(188, 93, 88)" ], [ "#DD9475", "Copper", "(221, 148, 117)" ], [ "#9ACEEB", "Cornflower", "(154, 206, 235)" ], [ "#FFBCD9", "Cotton Candy", "(255, 188, 217)" ], [ "#FDDB6D", "Dandelion", "(253, 219, 109)" ], [ "#2B6CC4", "Denim", "(43, 108, 196)" ], [ "#EFCDB8", "Desert Sand", "(239, 205, 184)" ], [ "#6E5160", "Eggplant", "(110, 81, 96)" ], [ "#CEFF1D", "Electric Lime", "(206, 255, 29)" ], [ "#71BC78", "Fern", "(113, 188, 120)" ], [ "#6DAE81", "Forest Green", "(109, 174, 129)" ], [ "#C364C5", "Fuchsia", "(195, 100, 197)" ], [ "#CC6666", "Fuzzy Wuzzy", "(204, 102, 102)" ], [ "#E7C697", "Gold", "(231, 198, 151)" ], [ "#FCD975", "Goldenrod", "(252, 217, 117)" ], [ "#A8E4A0", "Granny Smith Apple", "(168, 228, 160)" ], [ "#95918C", "Gray", "(149, 145, 140)" ], [ "#1CAC78", "Green", "(28, 172, 120)" ], [ "#1164B4", "Green Blue", "(17, 100, 180)" ], [ "#F0E891", "Green Yellow", "(240, 232, 145)" ], [ "#FF1DCE", "Hot Magenta", "(255, 29, 206)" ], [ "#B2EC5D", "Inchworm", "(178, 236, 93)" ], [ "#5D76CB", "Indigo", "(93, 118, 203)" ], [ "#CA3767", "Jazzberry Jam", "(202, 55, 103)" ], [ "#3BB08F", "Jungle Green", "(59, 176, 143)" ], [ "#FEFE22", "Laser Lemon", "(254, 254, 34)" ], [ "#FCB4D5", "Lavender", "(252, 180, 213)" ], [ "#FFF44F", "Lemon Yellow", "(255, 244, 79)" ], [ "#FFBD88", "Macaroni and Cheese", "(255, 189, 136)" ], [ "#F664AF", "Magenta", "(246, 100, 175)" ], [ "#AAF0D1", "Magic Mint", "(170, 240, 209)" ], [ "#CD4A4C", "Mahogany", "(205, 74, 76)" ], [ "#EDD19C", "Maize", "(237, 209, 156)" ], [ "#979AAA", "Manatee", "(151, 154, 170)" ], [ "#FF8243", "Mango Tango", "(255, 130, 67)" ], [ "#C8385A", "Maroon", "(200, 56, 90)" ], [ "#EF98AA", "Mauvelous", "(239, 152, 170)" ], [ "#FDBCB4", "Melon", "(253, 188, 180)" ], [ "#1A4876", "Midnight Blue", "(26, 72, 118)" ], [ "#30BA8F", "Mountain Meadow", "(48, 186, 143)" ], [ "#C54B8C", "Mulberry", "(197, 75, 140)" ], [ "#1974D2", "Navy Blue", "(25, 116, 210)" ], [ "#FFA343", "Neon Carrot", "(255, 163, 67)" ], [ "#BAB86C", "Olive Green", "(186, 184, 108)" ], [ "#FF7538", "Orange", "(255, 117, 56)" ], [ "#FF2B2B", "Orange Red", "(255, 43, 43)" ], [ "#F8D568", "Orange Yellow", "(248, 213, 104)" ], [ "#E6A8D7", "Orchid", "(230, 168, 215)" ], [ "#414A4C", "Outer Space", "(65, 74, 76)" ], [ "#FF6E4A", "Outrageous Orange", "(255, 110, 74)" ], [ "#1CA9C9", "Pacific Blue", "(28, 169, 201)" ], [ "#FFCFAB", "Peach", "(255, 207, 171)" ], [ "#C5D0E6", "Periwinkle", "(197, 208, 230)" ], [ "#FDDDE6", "Piggy Pink", "(253, 221, 230)" ], [ "#158078", "Pine Green", "(21, 128, 120)" ], [ "#FC74FD", "Pink Flamingo", "(252, 116, 253)" ], [ "#F78FA7", "Pink Sherbet", "(247, 143, 167)" ], [ "#8E4585", "Plum", "(142, 69, 133)" ], [ "#7442C8", "Purple Heart", "(116, 66, 200)" ], [ "#9D81BA", "Purple Mountain's Majesty", "(157, 129, 186)" ], [ "#FE4EDA", "Purple Pizzazz", "(254, 78, 218)" ], [ "#FF496C", "Radical Red", "(255, 73, 108)" ], [ "#D68A59", "Raw Sienna", "(214, 138, 89)" ], [ "#714B23", "Raw Umber", "(113, 75, 35)" ], [ "#FF48D0", "Razzle Dazzle Rose", "(255, 72, 208)" ], [ "#E3256B", "Razzmatazz", "(227, 37, 107)" ], [ "#EE204D", "Red", "(238, 32, 77)" ], [ "#FF5349", "Red Orange", "(255, 83, 73)" ], [ "#C0448F", "Red Violet", "(192, 68, 143)" ], [ "#1FCECB", "Robin's Egg Blue", "(31, 206, 203)" ], [ "#7851A9", "Royal Purple", "(120, 81, 169)" ], [ "#FF9BAA", "Salmon", "(255, 155, 170)" ], [ "#FC2847", "Scarlet", "(252, 40, 71)" ], [ "#76FF7A", "Screamin' Green", "(118, 255, 122)" ], [ "#9FE2BF", "Sea Green", "(159, 226, 191)" ], [ "#A5694F", "Sepia", "(165, 105, 79)" ], [ "#8A795D", "Shadow", "(138, 121, 93)" ], [ "#45CEA2", "Shamrock", "(69, 206, 162)" ], [ "#FB7EFD", "Shocking Pink", "(251, 126, 253)" ], [ "#CDC5C2", "Silver", "(205, 197, 194)" ], [ "#80DAEB", "Sky Blue", "(128, 218, 235)" ], [ "#ECEABE", "Spring Green", "(236, 234, 190)" ], [ "#FFCF48", "Sunglow", "(255, 207, 72)" ], [ "#FD5E53", "Sunset Orange", "(253, 94, 83)" ], [ "#FAA76C", "Tan", "(250, 167, 108)" ], [ "#18A7B5", "Teal Blue", "(24, 167, 181)" ], [ "#EBC7DF", "Thistle", "(235, 199, 223)" ], [ "#FC89AC", "Tickle Me Pink", "(252, 137, 172)" ], [ "#DBD7D2", "Timberwolf", "(219, 215, 210)" ], [ "#17806D", "Tropical Rain Forest", "(23, 128, 109)" ], [ "#DEAA88", "Tumbleweed", "(222, 170, 136)" ], [ "#77DDE7", "Turquoise Blue", "(119, 221, 231)" ], [ "#FFFF66", "Unmellow Yellow", "(255, 255, 102)" ], [ "#926EAE", "Violet (Purple)", "(146, 110, 174)" ], [ "#324AB2", "Violet Blue", "(50, 74, 178)" ], [ "#F75394", "Violet Red", "(247, 83, 148)" ], [ "#FFA089", "Vivid Tangerine", "(255, 160, 137)" ], [ "#8F509D", "Vivid Violet", "(143, 80, 157)" ], [ "#FFFFFF", "White", "(255, 255, 255)" ], [ "#A2ADD0", "Wild Blue Yonder", "(162, 173, 208)" ], [ "#FF43A4", "Wild Strawberry", "(255, 67, 164)" ], [ "#FC6C85", "Wild Watermelon", "(252, 108, 133)" ], [ "#CDA4DE", "Wisteria", "(205, 164, 222)" ], [ "#FCE883", "Yellow", "(252, 232, 131)" ], [ "#C5E384", "Yellow Green", "(197, 227, 132)" ], [ "#FFAE42", "Yellow Orange", "(255, 174, 66)" ] ];
// Sets up the multicolumn autocomplete widget. $("#search").mcautocomplete({ // These next two options are what this plugin adds to the autocomplete widget. showHeader: false,
columns: columns, source: colors,
// Event handler for when a list item is selected. select: function (event, ui) {
var result_text = (ui.item) ? ui.item[0] + ', ' + ui.item[1] + ', ' + ui.item[2] : ''; // this.value = (ui.item ? (ui.item[0] + ', ' + ui.item[1] + ', ' + ui.item[2]): ''); this.value = (ui.item ? ui.item[0] : '');
$('#results').text(ui.item ? 'Selected: ' + ui.item[0] + ', ' + ui.item[1] + ', ' + ui.item[2] : 'Nothing selected, input was ' + this.value);
return false; },
minLength: 1
}); </script>
<style> body { line-height: 1.25; font-size: 13px; }
ul.ui-widget { font-size: 13px; border: 0; }
ul.ui-widget li.ui-menu-item { list-style-image: none; font-family: "Helvetica Neue",HelveticaNeue,helvetica,arial,sans-serif; font-size: 92%; font-weight: 300; font-style: normal; font-size-adjust: none; margin: 0; padding: 1.8px 4.55px; white-space: nowrap; } .ui-widget-content a { color: #444444; }
ul.ui-widget li.ui-menu-item b { font-weight: 700; } #search { height: 25px; }
.ui-widget-content .ui-state-focus { background-color: #D6F7FF; background-image: none; border: 0; </style> </head>
<body>
<div id="div-container" style="margin:10px 10px;padding:8px;width:400px;" class="ui-widget ui-widget-content ui-corner-all">
<div style="margin:0 0 4px 4px;">Enter a color:</div>
<input id="search" type="text" style="padding:2px;font-size:.8em;width:300px;" /> <div style="margin:20px 0 0 0;"> <span id="results" style="color:#68a;"></span> </div> </div> </body> </html>
|