搜索功能未返回结果

Question

功能：

用户可以在图像源上进行搜索，当单击搜索时，将返回正确的图像源。

我做了什么：

创建了一个搜索输入框，当用户单击输入框时，将显示一个屏幕键盘（淡入）。 用户将点击键盘上的输入字符。 完成后，用户可以单击“搜索”按钮开始搜索，也可以在将字符写入文本搜索框中时开始搜索。

随附了供您细读的代码：

 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> 

问题：

此时，当用户从屏幕键盘输入字符时，不会通过以下方法从$("#SearchField").keyup(function(){..}调用自动搜索功能。我单击“搜索”按钮，搜索功能也没有被调用。

因此，我需要做的是，当用户从屏幕键盘上输入字符时，将调用搜索功能，并将搜索到的图像显示在列表中。

请帮忙谢谢。

Answer 1

尝试这个 ;）

刚刚手动添加了字符触发keyup事件后， 当前它不会触发，因为您是使用JavaScript而不是keyboard更新值 。

您在此处将字符添加到文本框（$ write）：

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

Answer 2

您必须使用事件监听器。 尝试：

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