Search function is not returning result

Question

Functionality:

User is able to do a search on image source and when click search, will return the correct image source.

What I have done:

Have created a Search input box and when user clicks on the input box, an onscreen keyboard will be displayed (fade in). User will get to click on the keyboard to input the character. Once done, user can either click on the Search button to begin Search or the search will begin as the characters are written into the text search box.

Have attached the code for your perusal:

 var shift = false, capslock = false; var $write; var slideDuration = 1200; $(function() { $("#SearchField").focus(function() { $write = $('#SearchField'); $("#keyboard").show(); }); //Search Image Brand Function $("#SearchField").keyup(function() { var userInput = $(this).val().toLowerCase(); console.log("here"); $("#list img").each(function() { $this = $(this), imageName = $this.attr('src').split('/'); // Split src by '/' // Get last part (filename) imageName = imageName.pop(); // Remove extension imageName = imageName.split('.')[0]; // Show images with matching filename $this.toggle(imageName.indexOf(userInput) >= 0); }); }); }); $("#SearchField").click(function() { $('#SearchKeyBoard').fadeIn({ duration: slideDuration, queue: false, complete: function() { $('#Search_keyboard li').off('click').on('click', function() { console.log("click"); idleTime = 0; var $this = $(this), character = $this.html(); // If it's a lowercase letter, nothing happens to this variable console.log(character); // Shift keys if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { $('.letter').toggleClass('uppercase'); $('.symbol span').toggle(); shift = (shift === true) ? false : true; capslock = false; return false; } // Caps lock if ($this.hasClass('capslock')) { $('.letter').toggleClass('uppercase'); capslock = true; return false; } // Delete if ($this.hasClass('delete')) { var html = $write.val(); $write.val(html.substr(0, html.length - 1)); return false; } // Clear if ($this.hasClass('clear')) { var html = $write.val(); $write.val(""); return false; } // Special characters if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); if ($this.hasClass('space')) character = ' '; if ($this.hasClass('tab')) character = "\\t"; if ($this.hasClass('return')) character = "\\n"; // Uppercase letter if ($this.hasClass('uppercase')) character = character.toUpperCase(); // Remove shift once a key is clicked. if (shift === true) { $('.symbol span').toggle(); if (capslock === false) $('.letter').toggleClass('uppercase'); shift = false; } // Add the character $write.val($write.val() + character); }); } }); }) //Search Image Brand Function function Search() { //var userInput = $(this).val().toLowerCase(); console.log("here"); $("#list img").each(function() { $this = $(this), imageName = $this.attr('src').split('/'); // Split src by '/' // Get last part (filename) imageName = imageName.pop(); // Remove extension imageName = imageName.split('.')[0]; // Show images with matching filename $this.toggle(imageName.indexOf(userInput) >= 0); }); } 

 /* Keyboard CSS*/ .keyboard { position: absolute; margin: 0; padding: 0; list-style: none; } .keyboard li { font-size: 20px; float: left; margin: 2 2 2 2; width: 65px; height: 50px; line-height: 50px; text-align: center; color: #000; background: #ffffff; border: 1px solid #000; -moz-border-radius: 5px; list-style: none; -webkit-border-radius: 5px; } .capslock, .tab, .left-shift { clear: left; } .keyboard .tab, .keyboard .delete { width: 165px; } .keyboard .capslock { width: 101px; } .keyboard .return { width: 101px; } .keyboard .left-shift { width: 165px; } .keyboard .right-shift { width: 165px; } .lastitem { margin-right: 0; } .uppercase { text-transform: uppercase; } .keyboard .space { clear: left; width: 685px; } .on { display: none; } .keyboard li:hover { position: relative; top: 1px; left: 1px; border-color: #e5e5e5; cursor: pointer; } #Search { position: absolute; top: 750px; left: 800px; z-index: 100; outline: 0; border: 0; background: transparent; } 

 <div id="Vivo_ChooseBrand" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; z-index=3; top:0px; left:0px;"> <input type="text" id="SearchField" style="position:absolute; top:190px; left:660px; height:40px; width:600px; outline=0px; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent; z-index=4;" src="lib/VivoCity/img/transparent.png"> <div class="Container"> <div id="list" class="innerScroll"> <!--1st Row--> <img id="Brand_1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px" data-brand="1"> <img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" data-brand="2"> <img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" data-brand="3"> <img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" data-brand="4"> <!--2nd Row--> <img id="Brand_5" style="width:284px; height:140px; top:140px; left:0px; border:0px;" onclick="selectBrand('5');"> <img id="Brand_6" style="width:284px; height:140px; top:140px; left:330px; border:0px;" onclick="selectBrand('6');"> <img id="Brand_7" style="width:284px; height:140px; top:140px; left:650px; border:0px;" onclick="selectBrand('7');"> <img id="Brand_8" style="width:284px; height:140px; top:140px; left:965px; border:0px;" onclick="selectBrand('8');"> </div> </div> </div> <div id="SearchKeyBoard" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; top:0px; left:0px; z-index=4;"> <ul class="keyboard" id="Search_keyboard" style="z-index:19; position:absolute;left:580px; top: 400px; color: #000000;"> <font face="CenturyGothic"><li class="symbol"><span class="off">1</span></li></font> <font face="CenturyGothic"><li class="symbol"><span class="off">2</span></li></font> <font face="CenturyGothic"><li class="symbol"><span class="off">3</span></li></font> <font face="CenturyGothic"><li class="symbol"><span class="off">4</span></li></font> <font face="CenturyGothic"><li class="symbol"><span class="off">5</span></li></font> <font face="CenturyGothic"><li class="symbol"><span class="off">6</span></li></font> <font face="CenturyGothic"><li class="symbol"><span class="off">7</span></li></font> <font face="CenturyGothic"><li class="symbol"><span class="off">8</span></li></font> <font face="CenturyGothic"><li class="symbol"><span class="off">9</span></li></font> <font face="CenturyGothic"><li class="symbol lastitem"><span class="off">0</span></li></font> <font face="CenturyGothic"><li class="letter" style="clear: left;">q</li></font> <font face="CenturyGothic"><li class="letter">w</li></font> <font face="CenturyGothic"><li class="letter">e</li></font> <font face="CenturyGothic"><li class="letter">r</li></font> <font face="CenturyGothic"><li class="letter">t</li></font> <font face="CenturyGothic"><li class="letter">y</li></font> <font face="CenturyGothic"><li class="letter">u</li></font> <font face="CenturyGothic"><li class="letter">i</li></font> <font face="CenturyGothic"><li class="letter">o</li></font> <font face="CenturyGothic"><li class="letter lastitem">p</li></font> <font face="CenturyGothic"><li class="letter" style="clear: left;">a</li></font> <font face="CenturyGothic"><li class="letter">s</li></font> <font face="CenturyGothic"><li class="letter">d</li></font> <font face="CenturyGothic"><li class="letter">f</li></font> <font face="CenturyGothic"><li class="letter">g</li></font> <font face="CenturyGothic"><li class="letter">h</li></font> <font face="CenturyGothic"><li class="letter">j</li></font> <font face="CenturyGothic"><li class="letter">k</li></font> <font face="CenturyGothic"><li class="letter">l</li></font> <font face="CenturyGothic"><li class="letter lastitem">z</li></font> <font face="CenturyGothic"><li class="letter" style="clear: left;">x</li></font> <font face="CenturyGothic"><li class="letter">c</li></font> <font face="CenturyGothic"><li class="letter">v</li></font> <font face="CenturyGothic"><li class="letter">b</li></font> <font face="CenturyGothic"><li class="letter">n</li></fint> <font face ="CenturyGothic"><li class="letter">m</li></font> <font face="CenturyGothic"><li class="symbol"><span class="off">(</span></li></font> <font face="CenturyGothic"><li class="symbol"><span class="off">)</span></li></font> <font face="CenturyGothic"><li class="symbol"><span class="off">@</span></li></font> <font face="CenturyGothic"><li class="symbol lastitem"><span class="off">-</span></li></font> <font face="CenturyGothic"><li class="clear" style=" clear: left; width: 330px;">Clear</li></font> <font face="CenturyGothic"> <li class="delete lastitem" style="width: 349px;">Backspace</li></font> <font face="CenturyGothic"><li class="space lastitem">Space &nbsp;</li></font> </ul> <button id="Search" onclick="Search()"> </button> </div> 

Issue:

At this point in time, when user inputs the character from the onscreen keyboard, the auto-search function is not being called from $("#SearchField").keyup(function(){..} the following method. Secondly, when I click on the Search button, the search function is not being called as well.

Hence, what I do need is that when user input the char from onscreen keyboard, the search function is being called and the searched image is being displayed in the list.

Please help Thank you.

Answer 1

Try this ;)

Just after adding character trigger keyup event manually currently it's not triggering because you are updating value using JavaScript not keyboard .

You added character here to textbox($write):

// Add the character
/* just after adding character trigger kayup event manually here */
$write.val($write.val() + character).trigger('keyup');

Answer 2

You have to use event listener. Try:

$('body').on('keyup','#SearchField',function(){
//do the next
});