Skip to content

Instantly share code, notes, and snippets.

@sosroInSpace
Created May 13, 2020 14:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sosroInSpace/0fb2332b94a3faa91edabd6b7a9a1d9f to your computer and use it in GitHub Desktop.
Save sosroInSpace/0fb2332b94a3faa91edabd6b7a9a1d9f to your computer and use it in GitHub Desktop.
script to append multiple input drop down search.
<input type="text" class="spb-productdescfont">
<input type="text" class="spb-productdescfont">
<input type="text" class="spb-productdescfont">
<script>
$('.spb-productdescfont').append('<div class="search-bar"><input type="text" class="seeker"></div><div class="content"></div>')
var data = [
{"name":"clackercart",},{"name":"rocking horse",},{"name":"ringtoss",},{"name":"succulent plant",},{"name":"manhole cover",},{"name":"birdbath",},{"name":"birdhouse",},{"name":"tiki torch",},{"name":"acoustic guitar",},{"name":"grass standee",},{"name":"hedge standee",},{"name":"mountain standee",},{"name":"tree standee",},{"name":"wave breaker",},{"name":"ukulele",},{"name":"tall lantern",},{"name":"deer scare",},{"name":"boomerang",},{"name":"bamboo bench",},{"name":"hearth",},{"name":"garden rock",},{"name":"tall garden rock",},{"name":"tea table",},{"name":"mush lamp",},{"name":"mush table",},{"name":"birdcage",},{"name":"wooden bucket",},{"name":"holiday candle",},{"name":"fruit basket",},{"name":"pile of leaves",},{"name":"magazine rack",},{"name":"moon",},{"name":"music stand",},{"name":"rocking chair",},{"name":"outdoor bath",},{"name":"scarecrow",},{"name":"brick oven",},{"name":"swinging bench",},{"name":"tire stack",},{"name":"DIY workbench",},{"name":"pear wardrobe",},{"name":"barrel",},{"name":"campfire",},{"name":"bonfire",},{"name":"asteroid",},{"name":"lunar lander",},{"name":"rocket",},{"name":"lunar rover",},{"name":"satellite",},{"name":"space shuttle",},{"name":"astronaut suit",},{"name":"flying saucer",},{"name":"giant teddy bear",},{"name":"robot hero",},{"name":"wooden-block bed",},{"name":"wooden-block bookshelf",},{"name":"wooden-block bench",},{"name":"wooden-block chest",},{"name":"wooden-block table",},{"name":"iron garden bench",},{"name":"iron garden chair",},{"name":"iron garden table",},{"name":"matryoshka",},{"name":"document stack",},{"name":"aroma pot",},{"name":"stack of books",},{"name":"decoy duck",},{"name":"doghouse",},{"name":"trash bags",},{"name":"stacked magazines",},{"name":"wooden chair",},{"name":"drinking fountain",},{"name":"water pump",},{"name":"tire toy",},{"name":"iron frame",},{"name":"wooden-block chair",},{"name":"pot",},{"name":"wooden chest",},{"name":"natural garden chair",},{"name":"juicy-apple TV",},{"name":"wooden simple bed",},{"name":"simple well",},{"name":"gold bars",},{"name":"mini DIY workbench",},{"name":"ironwood table",},{"name":"ironwood chair",},{"name":"ironwood low table",},{"name":"ironwood cart",},{"name":"ironwood dresser",},{"name":"ironwood bed",},{"name":"wooden-block stereo",},{"name":"wooden-block toy",},{"name":"wooden-block wall clock",},{"name":"clothesline",},{"name":"ironwood kitchenette",},{"name":"ironwood cupboard",},{"name":"ironwood clock",},{"name":"deer decoration",},{"name":"steamer-basket set",},{"name":"natural garden table",},{"name":"stone table",},{"name":"stone stool",},{"name":"beekeeper's hive",},{"name":"small cardboard boxes",},{"name":"medium cardboard boxes",},{"name":"large cardboard boxes",},{"name":"wooden wardrobe",},{"name":"wooden end table",},{"name":"wooden table",},{"name":"standard umbrella stand",},{"name":"western-style stone",},{"name":"wooden stool",},{"name":"golden toilet",},{"name":"golden seat",},{"name":"wooden waste bin",},{"name":"frozen table",},{"name":"frozen partition",},{"name":"frozen arch",},{"name":"frozen pillar",},{"name":"frozen sculpture",},{"name":"frozen bed",},{"name":"frozen chair",},{"name":"frozen tree",},{"name":"frozen counter",},{"name":"garden bench",},{"name":"bamboo shelf",},{"name":"bamboo partition",},{"name":"bamboo candleholder",},{"name":"bamboo doll",},{"name":"bamboo stopblock",},{"name":"bamboo floor lamp",},{"name":"bamboo wall decoration",},{"name":"iron wall lamp",},{"name":"iron worktable",},{"name":"iron hanger stand",},{"name":"iron wall rack",},{"name":"iron shelf",},{"name":"bonsai shelf",},{"name":"signpost",},{"name":"stall",},{"name":"cutting board",},{"name":"bamboo basket",},{"name":"hay bed",},{"name":"plain sink",},{"name":"coconut juice",},{"name":"sauna heater",},{"name":"plain wooden shop sign",},{"name":"golden candlestick",},{"name":"terrarium",},{"name":"Libra scale",},{"name":"hanging terrarium",},{"name":"brick well",},{"name":"potted ivy",},{"name":"pine bonsai tree",},{"name":"mush parasol",},{"name":"mush partition",},{"name":"mush log",},{"name":"golden dishes",},{"name":"oil-barrel bathtub",},{"name":"ironwood DIY workbench",},{"name":"big festive tree",},{"name":"orange end table",},{"name":"orange wall-mounted clock",},{"name":"shell arch",},{"name":"shell partition",},{"name":"shell stool",},{"name":"shell table",},{"name":"shell fountain",},{"name":"shell bed",},{"name":"shell lamp",},{"name":"festive tree",},{"name":"key holder",},{"name":"kettle bathtub",},{"name":"cherry speakers",},{"name":"cherry lamp",},{"name":"unglazed dish set",},{"name":"floral swag",},{"name":"scattered papers",},{"name":"log garden lounge",},{"name":"log decorative shelves",},{"name":"log wall-mounted clock",},{"name":"log stool",},{"name":"log chair",},{"name":"log dining table",},{"name":"log bed",},{"name":"log bench",},{"name":"log round table",},{"name":"log extra-long sofa",},{"name":"illuminated tree",},{"name":"tabletop festive tree",},{"name":"classic pitcher",},{"name":"illuminated reindeer",},{"name":"gong",},{"name":"barbell",},{"name":"bamboo drum",},{"name":"frying pan",},{"name":"infused-water dispenser",},{"name":"illuminated present",},{"name":"wooden fish",},{"name":"wooden bookshelf",},{"name":"peach chair",},{"name":"peach surprise box",},{"name":"coconut wall planter",},{"name":"illuminated snowflakes",},{"name":"apple chair",},{"name":"green-leaf pile",},{"name":"yellow-leaf pile",},{"name":"red-leaf pile",},{"name":"frozen-treat set",},{"name":"destinations signpost",},{"name":"old-fashioned washtub",},{"name":"pear bed",},{"name":"mush low stool",},{"name":"shell speaker",},{"name":"three-tiered snowperson",},{"name":"wooden-block stool",},{"name":"tiny library",},{"name":"wooden-plank sign",},{"name":"crewed spaceship",},{"name":"jail bars",},{"name":"golden dung beetle",},{"name":"Aries rocking chair",},{"name":"Virgo harp",},{"name":"Aquarius urn",},{"name":"Capricorn ornament",},{"name":"Sagittarius arrow",},{"name":"Cancer table",},{"name":"Gemini closet",},{"name":"Taurus bathtub",},{"name":"Scorpio lamp",},{"name":"Pisces lamp",},{"name":"Leo sculpture",},{"name":"firewood",},{"name":"wild log bench",},{"name":"log stakes",},{"name":"traditional balancing toy",},{"name":"bamboo sphere",},{"name":"bamboo-shoot lamp",},{"name":"bamboo lunch box",},{"name":"bamboo noodle slide",},{"name":"cherry-blossom bonsai",},{"name":"cherry-blossom branches",},{"name":"cherry-blossom-petal pile",},{"name":"outdoor picnic set",},{"name":"tree's bounty mobile",},{"name":"tree's bounty lamp",},{"name":"tree's bounty little tree",},{"name":"tree's bounty big tree",},{"name":"tree's bounty arch",},{"name":"ornament mobile",},{"name":"nova light",},{"name":"starry garland",},{"name":"crescent-moon chair",},{"name":"blossom-viewing lantern",},{"name":"cherry-blossom clock",},{"name":"recycled-can thumb piano",},{"name":"pile of zen cushions",},{"name":"wooden double bed",},{"name":"wooden mini table",},{"name":"wooden low table",},{"name":"wooden full-length mirror",},{"name":"simple DIY workbench",},{"name":"cardboard sofa",},{"name":"cardboard table",},{"name":"cardboard bed",},{"name":"cardboard chair",},{"name":"cosmos shower",},{"name":"tulip surprise box",},{"name":"mum cushion",},{"name":"windflower fan",},{"name":"hyacinth lamp",},{"name":"rose bed",},{"name":"lily record player",},{"name":"pansy table",},{"name":"silo",},{"name":"star clock",},{"name":"modeling clay",},{"name":"palm-tree lamp",},{"name":"trophy case",},{"name":"sleigh",},{"name":"zen-style stone",},{"name":"leaf stool",},{"name":"pond stone",},{"name":"maple-leaf pond stone",},{"name":"cherry-blossom pond stone",},{"name":"raccoon figurine",},{"name":"wooden toolbox",},{"name":"flower stand",},{"name":"kettlebell",},{"name":"leaf campfire",},{"name":"stone lion-dog",},{"name":"butter churn",},{"name":"angled signpost",},{"name":"fountain",},{"name":"garden wagon",},{"name":"golden casket",},{"name":"wooden table mirror",},{"name":"iron closet",},{"name":"lucky gold cat",},{"name":"bamboo stool",},{"name":"bamboo speaker",},{"name":"golden arowana model",},{"name":"golden gears",},{"name":"stone arch",},{"name":"street piano",},{"name":"stone tablet",},{"name":"flat garden rock",},{"name":"mossy garden rock",},{"name":"festive top set",},{"name":"natural square table",},{"name":"Bunny Day arch",},{"name":"wobbling Zipper toy",},{"name":"Bunny Day lamp",},{"name":"Bunny Day bed",},{"name":"Bunny Day stool",},{"name":"Bunny Day glowy garland",},{"name":"Bunny Day wall clock",},{"name":"Bunny Day merry balloons",},{"name":"Bunny Day vanity",},{"name":"Bunny Day festive balloons",},{"name":"Bunny Day table",},{"name":"Bunny Day wardrobe",},{"name":"leaf umbrella",},{"name":"orange umbrella",},{"name":"maple-leaf umbrella",},{"name":"mush umbrella",},{"name":"cherry-blossom umbrella",},{"name":"peach umbrella",},{"name":"apple umbrella",},{"name":"cherry umbrella",},{"name":"pear umbrella",},{"name":"shovel",},{"name":"axe",},{"name":"flimsy net",},{"name":"fishing rod",},{"name":"watering can",},{"name":"star wand",},{"name":"ladder",},{"name":"slingshot",},{"name":"flimsy axe",},{"name":"flimsy shovel",},{"name":"flimsy watering can",},{"name":"flimsy fishing rod",},{"name":"vaulting pole",},{"name":"hyacinth wand",},{"name":"windflower wand",},{"name":"tulip wand",},{"name":"pansy wand",},{"name":"cosmos wand",},{"name":"rose wand",},{"name":"lily wand",},{"name":"mums wand",},{"name":"net",},{"name":"stone axe",},{"name":"wand",},{"name":"ice wand",},{"name":"shell wand",},{"name":"tree-branch wand",},{"name":"mushroom wand",},{"name":"cherry-blossom wand",},{"name":"bamboo wand",},{"name":"golden wand",},{"name":"iron wand",},{"name":"golden net",},{"name":"golden watering can",},{"name":"golden shovel",},{"name":"golden slingshot",},{"name":"golden rod",},{"name":"golden axe",},{"name":"Bunny Day wand",},{"name":"wedding wand",},{"name":"steel-frame wall",},{"name":"brown herringbone wall",},{"name":"chocolate herringbone wall",},{"name":"rustic-stone wall",},{"name":"gold-screen wall",},{"name":"bamboo wall",},{"name":"classic-library wall",},{"name":"manga-library wall",},{"name":"cabin wall",},{"name":"stacked-wood wall",},{"name":"bamboo-grove wall",},{"name":"snowflake wall",},{"name":"wild-wood wall",},{"name":"wooden-mosaic wall",},{"name":"dark wooden-mosaic wall",},{"name":"honeycomb wall",},{"name":"golden wall",},{"name":"modern wood wall",},{"name":"autumn wall",},{"name":"wooden-knot wall",},{"name":"orange wall",},{"name":"apple wall",},{"name":"pear wall",},{"name":"peach wall",},{"name":"cherry wall",},{"name":"sakura-wood wall",},{"name":"mush wall",},{"name":"stone wall",},{"name":"woodland wall",},{"name":"garbage-heap wall",},{"name":"Jingle wall",},{"name":"Bunny Day wall",},{"name":"jungle wall",},{"name":"ski-slope wall",},{"name":"starry-sky wall",},{"name":"ice wall",},{"name":"underwater wall",},{"name":"sci-fi wall",},{"name":"starry wall",},{"name":"tropical vista",},{"name":"iceberg wall",},{"name":"forest wall",},{"name":"cherry-blossom-trees wall",},{"name":"basement flooring",},{"name":"steel flooring",},{"name":"bamboo flooring",},{"name":"lunar surface",},{"name":"sandy-beach flooring",},{"name":"backyard lawn",},{"name":"money flooring",},{"name":"ski-slope flooring",},{"name":"colored-leaves flooring",},{"name":"honeycomb flooring",},{"name":"golden flooring",},{"name":"water flooring",},{"name":"sakura-wood flooring",},{"name":"garbage-heap flooring",},{"name":"iceberg flooring",},{"name":"underwater flooring",},{"name":"galaxy flooring",},{"name":"sci-fi flooring",},{"name":"jungle flooring",},{"name":"ice flooring",},{"name":"forest flooring",},{"name":"cherry-blossom flooring",},{"name":"starry-sands flooring",},{"name":"Bunny Day flooring",},{"name":"apple rug",},{"name":"cherry rug",},{"name":"orange rug",},{"name":"peach rug",},{"name":"pear rug",},{"name":"shell rug",},{"name":"Bunny Day rug",},{"name":"light bamboo rug",},{"name":"dark bamboo rug",},{"name":"cosmos wreath",},{"name":"snowflake wreath",},{"name":"shell wreath",},{"name":"ornament wreath",},{"name":"fruit wreath",},{"name":"mushroom wreath",},{"name":"tree branch wreath",},{"name":"bone doorplate",},{"name":"iron doorplate",},{"name":"windflower wreath",},{"name":"rose wreath",},{"name":"pansy wreath",},{"name":"mum wreath",},{"name":"hyacinth wreath",},{"name":"lily wreath",},{"name":"tulip wreath",},{"name":"fancy lily wreath",},{"name":"paw-print doorplate",},{"name":"crest doorplate",},{"name":"timber doorplate",},{"name":"fossil doorplate",},{"name":"pretty cosmos wreath",},{"name":"cool windflower wreath",},{"name":"fancy rose wreath",},{"name":"snazzy pansy wreath",},{"name":"fancy mum wreath",},{"name":"cool hyacinth wreath",},{"name":"pretty tulip wreath",},{"name":"chic cosmos wreath",},{"name":"chic windflower wreath",},{"name":"dark rose wreath",},{"name":"cool pansy wreath",},{"name":"natural mum wreath",},{"name":"purple hyacinth wreath",},{"name":"dark lily wreath",},{"name":"dark tulip wreath",},{"name":"blue rose wreath",},{"name":"gold rose wreath",},{"name":"Bunny Day wreath",},{"name":"pitfall seed",},{"name":"medicine",},{"name":"fish bait",},{"name":"campsite construction kit",},{"name":"ocarina",},{"name":"pan flute",},{"name":"bridge construction kit",},{"name":"Vaulting Pole Recipe",},{"name":"Flimsy Shovel Recipe",},{"name":"Flimsy Watering Can Recipe",},{"name":"Slingshot Recipe",},{"name":"Flimsy Axe Recipe",},{"name":"Ladder Recipe",},{"name":"brick fence",},{"name":"vertical-board fence",},{"name":"bamboo lattice fence",},{"name":"corral fence",},{"name":"country fence",},{"name":"rope fence",},{"name":"imperial fence",},{"name":"straw fence",},{"name":"iron fence",},{"name":"spiky fence",},{"name":"iron-and-stone fence",},{"name":"zen fence",},{"name":"stone fence",},{"name":"barbed-wire fence",},{"name":"simple wooden fence",},{"name":"lattice fence",},{"name":"Bunny Day fence",},{"name":"hedge",},{"name":"wedding fence",},{"name":"leaf Green",},{"name":"acorn pochette Brown",},{"name":"basket pack Green",},{"name":"Bunny Day bag Colourful",},{"name":"cherry-blossom pochette Pink",},{"name":"knitted-grass backpack Green",},{"name":"log pack Brown",},{"name":"maple-leaf pochette Red",},{"name":"shellfish pochette White",},{"name":"snowflake pochette White",},{"name":"star pochette Yellow",},{"name":"grass skirt Brown",},{"name":"green grass skirt Green",},{"name":"apple hat Red",},{"name":"bamboo hat Beige",},{"name":"blue rose crown Blue",},{"name":"Bunny Day crown Colorful",},{"name":"cherry hat Red",},{"name":"chic mum crown Colorful",},{"name":"chic rose crown Purple",},{"name":"chic tulip crown Colorful",},{"name":"cool hyacinth crown Blue",},{"name":"cool pansy crown Colorful",},{"name":"cool windflower crown Colorful",},{"name":"cosmos crown Colorful",},{"name":"cute lily crown Colorful",},{"name":"cute rose crown Colorful",},{"name":"dark cosmos crown Dark red",},{"name":"dark lily crown Dark red",},{"name":"dark tulip crown Dark red",},{"name":"earth-egg shell Red",},{"name":"egg party hat Colorful",},{"name":"gold rose crown Gold",},{"name":"hyacinth crown Red",},{"name":"leaf-egg shell Green",},{"name":"lily crown Colorful",},{"name":"lovely cosmos crown Colorful",},{"name":"mum crown Colorful",},{"name":"orange hat Orange",},{"name":"pansy crown Colorful",},{"name":"peach hat Peach",},{"name":"pear hat Green",},{"name":"purple hyacinth crown Purple",},{"name":"purple pansy crown Purple",},{"name":"purple windflower crown Purple",},{"name":"rose crown Colorful",},{"name":"simple mum crown Green",},{"name":"sky-egg shell Blue",},{"name":"stone-egg shell Yellow",},{"name":"straw umbrella hat Brown",},{"name":"tulip crown Colorful",},{"name":"water-egg shell Purple",},{"name":"windflower crown Colorful",},{"name":"wood-egg shell Orange",},{"name":"gold helmet Gold",},{"name":"knight's helmet Gray",},{"name":"leaf mask Green",},{"name":"snowperson head White",},{"name":"star head Yellow",},{"name":"apple dress Red",},{"name":"cherry dress Red",},{"name":"earth-egg outfit Red",},{"name":"egg party dress Colorful",},{"name":"gold armor Gold",},{"name":"iron armor Gray",},{"name":"leaf-egg outfit Green",},{"name":"orange dress Orange",},{"name":"peach dress Peach",},{"name":"pear dress Beige",},{"name":"sky-egg outfit Blue",},{"name":"stone-egg outfit Yellow",},{"name":"water-egg outfit Purple",},{"name":"wood-egg outfit Orange",},{"name":"armor shoes Gray",},{"name":"earth-egg shoes Red",},{"name":"gold-armor shoes Gold",},{"name":"leaf-egg shoes Green",},{"name":"recycled boots Brown",},{"name":"sky-egg shoes Blue",},{"name":"stone-egg shoes Yellow",},{"name":"water-egg shoes Purple",},{"name":"wood-egg shoes Orange",},{"name":"traditional straw coat Brown",},
]
output = "";
$.each(data, function(key, val){
output += "<div class='values'>";
output += '<p class="value-name">' + val.name + '</p>'
output += "</div>";
});
$('.content').html(output);
/* SEEKER FUNCTION */
if (!RegExp.escape) {
RegExp.escape = function (s) {
return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
};
}
jQuery(function(){
var $rows = $('.values');
$('.seeker').keyup(function () {
var regex = new RegExp(RegExp.escape($.trim(this.value).replace(/\s+/g, ' ')), 'i')
$rows.hide().filter(function () {
var text = $(this).children(".value-name").text().replace(/\s+/g, ' ');
return regex.test(text)
}).show();
});
});
$('.search-bar').click(function(){
$('.content').removeClass('content-show');
$(this).next().toggleClass('content-show');
})
$('.seeker').change(function(){
var seeker_value = $(this).val();
$(this).parent().parent().parent().find('.spb-productdescfont').val(seeker_value);
$(this).parent().parent().parent().find('content').addClass('content-show');
$('.content').removeClass('content-show');
});
$('div#ProductSection-product-template').click(function(){
$('.search-bar').removeClass('content-show');
})
$('.value-name').click(function(){
console.log('clickeded');
var value_name_value = $(this).text();
// user seen input
var parent_item = $(this).parent().parent().prev();
var current_drop_down = $(this).parent().parent();
current_drop_down.removeClass('content-show');
parent_item = parent_item.find('.seeker');
parent_item.val(value_name_value);
// other input
var sibling_item = $(this).parent().parent().parent().parent();
var parent_item = sibling_item.find('.spb-productdescfont');
parent_item.val(value_name_value);
console.log(parent_item.val());
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment