javascript - Search box in select -
hello having big select box have huge list of elements , need search box while selecting option , how can done . thank .
<select title="title"> <option></option> <option>burger, shake , smile</option> <option>sugar, spice , things nice</option> <option>baby ribs</option> <option>a really long option made illustrate issue live search in inline form</option> </select>
i have created select option using divs. container , options needed, original tag. jquery rest.
sample html needed:
<div class='select search' id='sel1'> <div class='item'>this</div> <div class='item'>is a</div> <div class='item'>select</div> <div class='item'>with many</div> <div class='item'>option</div> <div class='item'>and </div> <div class='item'>search</div> <div class='item'>box</div> <div class='item'>and here huge option. hope enjoy!</div> </div> css:
#sel2, #sel1 { width: 300px; margin-bottom: 20px; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgba(255, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } .select { cursor: pointer; display: block; box-shadow: 1px 1px 2px 0px #000; font-family: sans-serif; font-size: 16px; } .select .selected { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 15px 5px 10px; width: 100%; border: 1px solid black; border-radius: 3px; box-sizing: border-box; background-image: url(https://s13.postimg.org/gcbinjsp3/select_arrow.png); background-size: 20px 30px; background-repeat: no-repeat; background-position-x: 100%; background-color: white; box-shadow: -35px 0px 15px -15px rgba(128, 128, 128, 0.2) inset; } .select .container { display: none; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; background-color: white; position: absolute; box-shadow: 1px 1px 2px 0px #000; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; width: inherit; box-sizing: border-box; margin-top: -2px; } .select .item-wrapper { display: block; width: inherit; box-sizing: border-box; white-space: normal; overflow-x: hidden; max-height: 11em; height: 100%; padding: 1px; } .select .item { padding: 5px; border: 1px solid rgba(0, 0, 0, 0); display: none; } .select .item:hover { background-color: #e5553f; color: white; border: 1px solid rgba(255, 0, 0, 0.2); border-radius: 3px; } .select .item-search { width: inherit; display: flex; align-items: center; box-sizing: border-box; height: 40px; } .select .item-search .red-input { margin: 0px 10px; flex: 1; width: 100%; height: 25px; box-shadow: 0px 0px 2px 0px #000; } .red-input { padding: 5px; border: solid 1px black; border-radius: 3px; outline: none; font-weight: bold; box-sizing: border-box; } .red-input:focus { background-color: #ffefed; } jquery:
$(document).ready(function() { //cria elementos auxiliares $('.select').wrapinner("<div class='item-wrapper'></div>"); $('.select').wrapinner("<div class='container'></div>"); $('.select .container').before("<div class='selected'></div>"); $('.select.search .item-wrapper').before("<div class='item-search'><input type='text' class='red-input'></div>"); //evento input $('.select .item-search .red-input').on('input', function() { var obj = $(this).parents('.select'); var texto = tira_acentos($(this).val().tolowercase()); obj.find('.item').removeattr('style'); obj.find('.item').each(function() { var conteudo = tira_acentos($(this).html().tolowercase()); if (conteudo.includes(texto)) $(this).show(); }); }); //abre caixa $('.select .selected').click(function() { var obj = $(this).parents('.select'); obj.find('.container').slidedown(100); obj.find('.item-search .red-input').val(""); obj.find('.item').show(); obj.find('.item-search .red-input').focus(); }); //seleciona um item da caixa $('.select .item').click(function() { var obj = $(this).parents('.select'); $('.select .container').fadeout(200); obj.find('.selected').html($(this).html()); obj.attr('data-value', $(this).attr('data-value')); obj.change(); }); //clica fora da caixa $(window).click(function(e) { var obj = $(e.target).parents('.select'); if (obj.length == 0) $('.select .container').fadeout(200); else { $('.select').each(function() { if (!$(this).is(obj)) { $(this).find('.container').fadeout(200); } }); } }); //inicialmente, seleciona o primeiro item da caixa $('.select').each(function() { $(this).find('.item').eq(0).click(); }); }); function tira_acentos(str) { var mapa = [{ 'base': 'a', 'letters': /[\u0041\u24b6\uff21\u00c0\u00c1\u00c2\u1ea6\u1ea4\u1eaa\u1ea8\u00c3\u0100\u0102\u1eb0\u1eae\u1eb4\u1eb2\u0226\u01e0\u00c4\u01de\u1ea2\u00c5\u01fa\u01cd\u0200\u0202\u1ea0\u1eac\u1eb6\u1e00\u0104\u023a\u2c6f]/g }, { 'base': 'aa', 'letters': /[\ua732]/g }, { 'base': 'ae', 'letters': /[\u00c6\u01fc\u01e2]/g }, { 'base': 'ao', 'letters': /[\ua734]/g }, { 'base': 'au', 'letters': /[\ua736]/g }, { 'base': 'av', 'letters': /[\ua738\ua73a]/g }, { 'base': 'ay', 'letters': /[\ua73c]/g }, { 'base': 'b', 'letters': /[\u0042\u24b7\uff22\u1e02\u1e04\u1e06\u0243\u0182\u0181]/g }, { 'base': 'c', 'letters': /[\u0043\u24b8\uff23\u0106\u0108\u010a\u010c\u00c7\u1e08\u0187\u023b\ua73e]/g }, { 'base': 'd', 'letters': /[\u0044\u24b9\uff24\u1e0a\u010e\u1e0c\u1e10\u1e12\u1e0e\u0110\u018b\u018a\u0189\ua779]/g }, { 'base': 'dz', 'letters': /[\u01f1\u01c4]/g }, { 'base': 'dz', 'letters': /[\u01f2\u01c5]/g }, { 'base': 'e', 'letters': /[\u0045\u24ba\uff25\u00c8\u00c9\u00ca\u1ec0\u1ebe\u1ec4\u1ec2\u1ebc\u0112\u1e14\u1e16\u0114\u0116\u00cb\u1eba\u011a\u0204\u0206\u1eb8\u1ec6\u0228\u1e1c\u0118\u1e18\u1e1a\u0190\u018e]/g }, { 'base': 'f', 'letters': /[\u0046\u24bb\uff26\u1e1e\u0191\ua77b]/g }, { 'base': 'g', 'letters': /[\u0047\u24bc\uff27\u01f4\u011c\u1e20\u011e\u0120\u01e6\u0122\u01e4\u0193\ua7a0\ua77d\ua77e]/g }, { 'base': 'h', 'letters': /[\u0048\u24bd\uff28\u0124\u1e22\u1e26\u021e\u1e24\u1e28\u1e2a\u0126\u2c67\u2c75\ua78d]/g }, { 'base': 'i', 'letters': /[\u0049\u24be\uff29\u00cc\u00cd\u00ce\u0128\u012a\u012c\u0130\u00cf\u1e2e\u1ec8\u01cf\u0208\u020a\u1eca\u012e\u1e2c\u0197]/g }, { 'base': 'j', 'letters': /[\u004a\u24bf\uff2a\u0134\u0248]/g }, { 'base': 'k', 'letters': /[\u004b\u24c0\uff2b\u1e30\u01e8\u1e32\u0136\u1e34\u0198\u2c69\ua740\ua742\ua744\ua7a2]/g }, { 'base': 'l', 'letters': /[\u004c\u24c1\uff2c\u013f\u0139\u013d\u1e36\u1e38\u013b\u1e3c\u1e3a\u0141\u023d\u2c62\u2c60\ua748\ua746\ua780]/g }, { 'base': 'lj', 'letters': /[\u01c7]/g }, { 'base': 'lj', 'letters': /[\u01c8]/g }, { 'base': 'm', 'letters': /[\u004d\u24c2\uff2d\u1e3e\u1e40\u1e42\u2c6e\u019c]/g }, { 'base': 'n', 'letters': /[\u004e\u24c3\uff2e\u01f8\u0143\u00d1\u1e44\u0147\u1e46\u0145\u1e4a\u1e48\u0220\u019d\ua790\ua7a4]/g }, { 'base': 'nj', 'letters': /[\u01ca]/g }, { 'base': 'nj', 'letters': /[\u01cb]/g }, { 'base': 'o', 'letters': /[\u004f\u24c4\uff2f\u00d2\u00d3\u00d4\u1ed2\u1ed0\u1ed6\u1ed4\u00d5\u1e4c\u022c\u1e4e\u014c\u1e50\u1e52\u014e\u022e\u0230\u00d6\u022a\u1ece\u0150\u01d1\u020c\u020e\u01a0\u1edc\u1eda\u1ee0\u1ede\u1ee2\u1ecc\u1ed8\u01ea\u01ec\u00d8\u01fe\u0186\u019f\ua74a\ua74c]/g }, { 'base': 'oi', 'letters': /[\u01a2]/g }, { 'base': 'oo', 'letters': /[\ua74e]/g }, { 'base': 'ou', 'letters': /[\u0222]/g }, { 'base': 'p', 'letters': /[\u0050\u24c5\uff30\u1e54\u1e56\u01a4\u2c63\ua750\ua752\ua754]/g }, { 'base': 'q', 'letters': /[\u0051\u24c6\uff31\ua756\ua758\u024a]/g }, { 'base': 'r', 'letters': /[\u0052\u24c7\uff32\u0154\u1e58\u0158\u0210\u0212\u1e5a\u1e5c\u0156\u1e5e\u024c\u2c64\ua75a\ua7a6\ua782]/g }, { 'base': 's', 'letters': /[\u0053\u24c8\uff33\u1e9e\u015a\u1e64\u015c\u1e60\u0160\u1e66\u1e62\u1e68\u0218\u015e\u2c7e\ua7a8\ua784]/g }, { 'base': 't', 'letters': /[\u0054\u24c9\uff34\u1e6a\u0164\u1e6c\u021a\u0162\u1e70\u1e6e\u0166\u01ac\u01ae\u023e\ua786]/g }, { 'base': 'tz', 'letters': /[\ua728]/g }, { 'base': 'u', 'letters': /[\u0055\u24ca\uff35\u00d9\u00da\u00db\u0168\u1e78\u016a\u1e7a\u016c\u00dc\u01db\u01d7\u01d5\u01d9\u1ee6\u016e\u0170\u01d3\u0214\u0216\u01af\u1eea\u1ee8\u1eee\u1eec\u1ef0\u1ee4\u1e72\u0172\u1e76\u1e74\u0244]/g }, { 'base': 'v', 'letters': /[\u0056\u24cb\uff36\u1e7c\u1e7e\u01b2\ua75e\u0245]/g }, { 'base': 'vy', 'letters': /[\ua760]/g }, { 'base': 'w', 'letters': /[\u0057\u24cc\uff37\u1e80\u1e82\u0174\u1e86\u1e84\u1e88\u2c72]/g }, { 'base': 'x', 'letters': /[\u0058\u24cd\uff38\u1e8a\u1e8c]/g }, { 'base': 'y', 'letters': /[\u0059\u24ce\uff39\u1ef2\u00dd\u0176\u1ef8\u0232\u1e8e\u0178\u1ef6\u1ef4\u01b3\u024e\u1efe]/g }, { 'base': 'z', 'letters': /[\u005a\u24cf\uff3a\u0179\u1e90\u017b\u017d\u1e92\u1e94\u01b5\u0224\u2c7f\u2c6b\ua762]/g }, { 'base': 'a', 'letters': /[\u0061\u24d0\uff41\u1e9a\u00e0\u00e1\u00e2\u1ea7\u1ea5\u1eab\u1ea9\u00e3\u0101\u0103\u1eb1\u1eaf\u1eb5\u1eb3\u0227\u01e1\u00e4\u01df\u1ea3\u00e5\u01fb\u01ce\u0201\u0203\u1ea1\u1ead\u1eb7\u1e01\u0105\u2c65\u0250]/g }, { 'base': 'aa', 'letters': /[\ua733]/g }, { 'base': 'ae', 'letters': /[\u00e6\u01fd\u01e3]/g }, { 'base': 'ao', 'letters': /[\ua735]/g }, { 'base': 'au', 'letters': /[\ua737]/g }, { 'base': 'av', 'letters': /[\ua739\ua73b]/g }, { 'base': 'ay', 'letters': /[\ua73d]/g }, { 'base': 'b', 'letters': /[\u0062\u24d1\uff42\u1e03\u1e05\u1e07\u0180\u0183\u0253]/g }, { 'base': 'c', 'letters': /[\u0063\u24d2\uff43\u0107\u0109\u010b\u010d\u00e7\u1e09\u0188\u023c\ua73f\u2184]/g }, { 'base': 'd', 'letters': /[\u0064\u24d3\uff44\u1e0b\u010f\u1e0d\u1e11\u1e13\u1e0f\u0111\u018c\u0256\u0257\ua77a]/g }, { 'base': 'dz', 'letters': /[\u01f3\u01c6]/g }, { 'base': 'e', 'letters': /[\u0065\u24d4\uff45\u00e8\u00e9\u00ea\u1ec1\u1ebf\u1ec5\u1ec3\u1ebd\u0113\u1e15\u1e17\u0115\u0117\u00eb\u1ebb\u011b\u0205\u0207\u1eb9\u1ec7\u0229\u1e1d\u0119\u1e19\u1e1b\u0247\u025b\u01dd]/g }, { 'base': 'f', 'letters': /[\u0066\u24d5\uff46\u1e1f\u0192\ua77c]/g }, { 'base': 'g', 'letters': /[\u0067\u24d6\uff47\u01f5\u011d\u1e21\u011f\u0121\u01e7\u0123\u01e5\u0260\ua7a1\u1d79\ua77f]/g }, { 'base': 'h', 'letters': /[\u0068\u24d7\uff48\u0125\u1e23\u1e27\u021f\u1e25\u1e29\u1e2b\u1e96\u0127\u2c68\u2c76\u0265]/g }, { 'base': 'hv', 'letters': /[\u0195]/g }, { 'base': 'i', 'letters': /[\u0069\u24d8\uff49\u00ec\u00ed\u00ee\u0129\u012b\u012d\u00ef\u1e2f\u1ec9\u01d0\u0209\u020b\u1ecb\u012f\u1e2d\u0268\u0131]/g }, { 'base': 'j', 'letters': /[\u006a\u24d9\uff4a\u0135\u01f0\u0249]/g }, { 'base': 'k', 'letters': /[\u006b\u24da\uff4b\u1e31\u01e9\u1e33\u0137\u1e35\u0199\u2c6a\ua741\ua743\ua745\ua7a3]/g }, { 'base': 'l', 'letters': /[\u006c\u24db\uff4c\u0140\u013a\u013e\u1e37\u1e39\u013c\u1e3d\u1e3b\u017f\u0142\u019a\u026b\u2c61\ua749\ua781\ua747]/g }, { 'base': 'lj', 'letters': /[\u01c9]/g }, { 'base': 'm', 'letters': /[\u006d\u24dc\uff4d\u1e3f\u1e41\u1e43\u0271\u026f]/g }, { 'base': 'n', 'letters': /[\u006e\u24dd\uff4e\u01f9\u0144\u00f1\u1e45\u0148\u1e47\u0146\u1e4b\u1e49\u019e\u0272\u0149\ua791\ua7a5]/g }, { 'base': 'nj', 'letters': /[\u01cc]/g }, { 'base': 'o', 'letters': /[\u006f\u24de\uff4f\u00f2\u00f3\u00f4\u1ed3\u1ed1\u1ed7\u1ed5\u00f5\u1e4d\u022d\u1e4f\u014d\u1e51\u1e53\u014f\u022f\u0231\u00f6\u022b\u1ecf\u0151\u01d2\u020d\u020f\u01a1\u1edd\u1edb\u1ee1\u1edf\u1ee3\u1ecd\u1ed9\u01eb\u01ed\u00f8\u01ff\u0254\ua74b\ua74d\u0275]/g }, { 'base': 'oi', 'letters': /[\u01a3]/g }, { 'base': 'ou', 'letters': /[\u0223]/g }, { 'base': 'oo', 'letters': /[\ua74f]/g }, { 'base': 'p', 'letters': /[\u0070\u24df\uff50\u1e55\u1e57\u01a5\u1d7d\ua751\ua753\ua755]/g }, { 'base': 'q', 'letters': /[\u0071\u24e0\uff51\u024b\ua757\ua759]/g }, { 'base': 'r', 'letters': /[\u0072\u24e1\uff52\u0155\u1e59\u0159\u0211\u0213\u1e5b\u1e5d\u0157\u1e5f\u024d\u027d\ua75b\ua7a7\ua783]/g }, { 'base': 's', 'letters': /[\u0073\u24e2\uff53\u00df\u015b\u1e65\u015d\u1e61\u0161\u1e67\u1e63\u1e69\u0219\u015f\u023f\ua7a9\ua785\u1e9b]/g }, { 'base': 't', 'letters': /[\u0074\u24e3\uff54\u1e6b\u1e97\u0165\u1e6d\u021b\u0163\u1e71\u1e6f\u0167\u01ad\u0288\u2c66\ua787]/g }, { 'base': 'tz', 'letters': /[\ua729]/g }, { 'base': 'u', 'letters': /[\u0075\u24e4\uff55\u00f9\u00fa\u00fb\u0169\u1e79\u016b\u1e7b\u016d\u00fc\u01dc\u01d8\u01d6\u01da\u1ee7\u016f\u0171\u01d4\u0215\u0217\u01b0\u1eeb\u1ee9\u1eef\u1eed\u1ef1\u1ee5\u1e73\u0173\u1e77\u1e75\u0289]/g }, { 'base': 'v', 'letters': /[\u0076\u24e5\uff56\u1e7d\u1e7f\u028b\ua75f\u028c]/g }, { 'base': 'vy', 'letters': /[\ua761]/g }, { 'base': 'w', 'letters': /[\u0077\u24e6\uff57\u1e81\u1e83\u0175\u1e87\u1e85\u1e98\u1e89\u2c73]/g }, { 'base': 'x', 'letters': /[\u0078\u24e7\uff58\u1e8b\u1e8d]/g }, { 'base': 'y', 'letters': /[\u0079\u24e8\uff59\u1ef3\u00fd\u0177\u1ef9\u0233\u1e8f\u00ff\u1ef7\u1e99\u1ef5\u01b4\u024f\u1eff]/g }, { 'base': 'z', 'letters': /[\u007a\u24e9\uff5a\u017a\u1e91\u017c\u017e\u1e93\u1e95\u01b6\u0225\u0240\u2c6c\ua763]/g }]; (var = 0; < mapa.length; i++) { str = str.replace(mapa[i].letters, mapa[i].base); } return str; } check out , use if it. https://jsfiddle.net/bcjyogok/3/
Comments
Post a Comment