搜索功能未返回结果

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

试试这个;）

  

在手动添加字符触发器启动事件 之后，当前它没有触发，因为您使用JavaScript而非键盘更新值。

你在这里添加了字符到文本框（$ 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
});