Question

功能性：

当用户点击“搜索输入”框时，将显示一个Jquery键盘。然后，用户单击jQuery键盘上显示的字符以键入要搜索的项目名称。如果有匹配项，将显示该项目的图像，否则将不会显示任何内容。

已完成的工作：

我创建了以下内容：

1。）搜索框的输入标签，当用户点击输入框时，将显示jQuery键盘。

2。）我创建了一个函数，即每次从jQuery键盘输入密钥，它都会执行＆＃39; keyup＆＃39;函数用项目的文件名检查输入字符以查看是否匹配。如果匹配，则显示项目的图像，否则，不显示任何内容。

代码：

＆＃13;

var BrandNameArray = ["lib/img/Pxyz/img/xyz.jpg.png", "lib/img/xyz/img/xyz.jpasdfg.png", "lib/img/xyz/img/xyz.jpgasdf.png", "lib/img/xyz/img/xyz.jpqweg.png"];

$("#SearchField").keyup(function() {
  var userInput = $(this).val().toLowerCase();
  var showImages = 0;

  console.log("keyup 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);

    //if we can show an image, increment showImages
    if (imageName.indexOf(userInput) >= 0) {
      $this.toggle(imageName.indexOf(userInput));
      showImages++;
    }
  });
  //if this stays at 0 we have shown no images, display error message
  if (!showImages) {
    //append text to a div to show error message
    $("#Brand_wrong").fadeIn();
  }
});


$("#SearchField").click(function() {

  document.getElementById("ClickSoundAudio").play();
  $("#SearchField").val("");
  $("#Brand_wrong").hide();

  //Disable Button click  
  $("#BrandPageBackButton").prop("disabled", true);
  $("#showAll").prop("disabled", true);
  $("#showFnB").prop("disabled", true);
  $("#showBeauty").prop("disabled", true);
  $("#showFashion").prop("disabled", true);

  //Keyboard Script
  //To remove 'click' event before adding new click 'event' everytime after page is loaded: allow keyboard character event to be run only once only when page is loaded
  $('#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 and trigger keyup event manually when keypad is clicked
        //$write.val($write.val() + character).trigger('keyup');

        var inputValue = $write.val();
        textBefore = inputValue.substring(0, cursorPos);
        textAfter = inputValue.substring(cursorPos, inputValue.length);

        $write.val(textBefore + character + textAfter).trigger('keyup');
        cursorPos += character.length;
      });
    }
  });
})

＆＃13;

/* 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: #fff;
  background: #a497b4;
  border: 1px solid #5e5767;
  -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;
  width: 330px;
  height: 80px;
  top: 1620px;
  left: 410px;
  z-index: 100;
  outline: 0;
  border: 0;
  background: transparent;
}

＆＃13;

<input type="text" id="SearchField" style="position:absolute; top:390px; left:220px; height:50px; width:600px; outline: 0; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent; z-index=5;">

<div id="SearchKeyBoard" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; top:0px; left:0px; z-index=6;">

  <div id="Brand_wrong" style="z-index:99; position:absolute; top:450px; left:200px; display: none; font-size:25px; font-family:'CenturyGothic'; width:1080; color:#000000;"><font face="NeutralText">* Brand not found. Please Enter a Valid Brand within the list</font>
  </div>
  <ul class="keyboard" id="Search_keyboard" style="z-index:8; position:absolute;left:230px; top: 1280px; color: #000000;">
    <font face="NeutralText"><li class="symbol"><span class="off">1</span></li></font>
    <font face="NeutralText"><li class="symbol"><span class="off">2</span></li></font>
    <font face="NeutralText"><li class="symbol"><span class="off">3</span></li></font>
    <font face="NeutralText"><li class="symbol"><span class="off">4</span></li></font>
    <font face="NeutralText"><li class="symbol"><span class="off">5</span></li></font>
    <font face="NeutralText"><li class="symbol"><span class="off">6</span></li></font>
    <font face="NeutralText"><li class="symbol"><span class="off">7</span></li></font>
    <font face="NeutralText"><li class="symbol"><span class="off">8</span></li></font>
    <font face="NeutralText"><li class="symbol"><span class="off">9</span></li></font>
    <font face="NeutralText"><li class="symbol lastitem"><span class="off">0</span></li></font>

    <font face="NeutralText"><li class="letter" style="clear: left;">q</li></font>
    <font face="NeutralText"><li class="letter">w</li></font>
    <font face="NeutralText"><li class="letter">e</li></font>
    <font face="NeutralText"><li class="letter">r</li></font>
    <font face="NeutralText"><li class="letter">t</li></font>
    <font face="NeutralText"><li class="letter">y</li></font>
    <font face="NeutralText"><li class="letter">u</li></font>
    <font face="NeutralText"><li class="letter">i</li></font>
    <font face="NeutralText"><li class="letter">o</li></font>
    <font face="NeutralText"><li class="letter lastitem">p</li></font>

    <font face="NeutralText"><li class="letter" style="clear: left;">a</li></font>
    <font face="NeutralText"><li class="letter">s</li></font>
    <font face="NeutralText"><li class="letter">d</li></font>
    <font face="NeutralText"><li class="letter">f</li></font>
    <font face="NeutralText"><li class="letter">g</li></font>
    <font face="NeutralText"><li class="letter">h</li></font>
    <font face="NeutralText"><li class="letter">j</li></font>
    <font face="NeutralText"><li class="letter">k</li></font>
    <font face="NeutralText"><li class="letter">l</li></font>
    <font face="NeutralText"><li class="letter lastitem">z</li></font>

    <font face="NeutralText"><li class="letter" style="clear: left;">x</li></font>
    <font face="NeutralText"><li class="letter">c</li></font>
    <font face="NeutralText"><li class="letter">v</li></font>
    <font face="NeutralText"><li class="letter">b</li></font>
    <font face="NeutralText"><li class="letter">n</li></font>
    <font face="NeutralText"><li class="letter">m</li></font>
    <font face="NeutralText"><li class="symbol"><span class="off">(</span></li></font>
    <font face="NeutralText"><li class="symbol">< span class="off">)</span></li></font>
    <font face="NeutralText"><li class="symbol"><span class="off">@</span></li></font>
    <font face="NeutralText"><li class="symbol lastitem"><span class="off">-</span></li></font>
    <font face="NeutralText"><li class="clear" style=" clear: left; width: 330px;">Clear</li></font>
    <font face="NeutralText"> <li class="delete lastitem" style="width: 349px;">Backspace</li></font>

    <font face="NeutralText"><li class="space lastitem">Space &nbsp;</li></font>
  </ul>
  <button class="Search" onclick="Search()"></button>
</div>

＆＃13;

问题：

我创建了以下代码，但我面临的问题是：

当用户从jQuery键盘输入字符时，应始终从图像数组中搜索以下文件名。并且还应始终通过消除与输入字符不对应的图像项来检查输入是否对应。但是，我面临的当前行为是，当用户输入字符时，键盘搜索功能只会替换图像项列表，而不是消除不正确的图像。
如果输入具有对应项，则仅显示相关项目图像（仅1：正确项目）时，将显示项目图像数组。
如果在应该返回空图像项目列表时，仍然没有显示对应的任何图像项目的输入。

搜索的正确行为：

当用户点击SearchField时，会显示图像项列表。显示jQuery键盘
当用户从jQuery键盘输入字符时，它会从图像数组中搜索以下文件名。
如果输入对应，则会显示相关的项目图像（仅1：正确的项目）。
否则，如果没有对应的输入，则应返回空图像项列表。任何图像都不应该显示。

因此，我想寻求帮助并找出问题所在。

由于

请帮忙。

在搜索输入

0 个答案: