为什么我的JavaScript搜索引擎不起作用？

时间：2015-09-03 11:34:16

标签： javascript jquery

我正在从头开始创建这个移动应用程序，我已经到了需要创建搜索引擎以促进用户体验的地步，但我无法使其工作，它有一个{{1}您键入搜索的位置，它会立即在列表中搜索它，并仅显示兼容的项目。

洁肤：

textarea

假设您要在+-------------+ |Search here | +-------------+ |item | |car | |toothpick | |JustDoIt | |Ibiza | +-------------+ 后键入item，当您输入i时，它会检查所有以字母i开头的字词，因此，所有没有i作为首字母的项目都会从列表中隐藏（它同时用作过滤器） 

i

我的目标是一个接一个地从头开始，但现在我卡住了，感谢任何帮助。

mycode的：

+-------------+
|i...         |
+-------------+             
|item         |
|Ibiza        | 
+-------------+

+-------------+
|item         |
+-------------+             
|item         |
+-------------+

//SEARCHING

//Searching through #group and gathering all the lists' ids
var IDs = [];
$("#group").find(".items").each(function(){
  IDs.push(this.id); 
});
//Searching through #group and gathering all the lists' ids

//Change text when the user hovers on the search
function changeText(){
  var textarea = document.getElementById('search'); 
  textarea.value = "";
  $('.items').hide();
  if(textarea.value === ""){
    $('.items').show();
  }
}
//Change text when the user hovers on the search
$("#search").on('change keyup paste', function() {
  var textarea = document.getElementById('search'); 
  
  $('.items').hide();
  if(textarea.value === ""){
    $('.items').show();
  }
  
  //Compares LABEL and SEARCH
  function matchEmUp(pred,prey,ID){
    
    var each1='', each2='',acum1='', acum2='';
    for(var i=0; i<pred.length;i++){
      each1 = pred.substring(i, i+1);
      acum1 += each1;
      each2 = prey.substring(i, i+1);
      acum2 += each2; 
      
      if(acum1 == acum2){
        //console.log(acum1+"\n"+acum2);
        $('#'+ID).show();
      }else{
        $('.items').hide();
      }
    }
  }
  //Compares LABEL and SEARCH
  
  var value = ((textarea.value).toLowerCase());
  var array = [];
  var ID = (IDs[i]);//get the list's ID
  var LABEL = [];
  
  //getting IDs
  for(var i=0;i<IDs.length;i++){
    ID = (IDs[i]);//get the list's ID
    LABEL.push(($('#'+ID).children('.label').text()).toLowerCase());
    var SEARCH = value;//get the search node
  
  matchEmUp($.trim(SEARCH),LABEL[i],ID);
  }
 
  
  /*if($.trim(LABEL) == $.trim(SEARCH)){ //compare them
      $('#'+ID).show();//show only the result
    }*/
  
  //getting IDs
  
});
//SEARCHING
body,html{
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
ul {
  display: inline-flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
a{
  color: white;
  text-decoration: none;
}
div{
  display: inline-flex;
}
#header{  
  text-align: center;
  height: 50px;
  background-image: -moz-linear-gradient(top, #6495ED 3%, #9BC2E6);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #6495ED), color-stop(1.0, #9BC2E6));
  background-color: #F0F8FF;
  font-family: 'Open Sans', sans-serif;
  color: white;
  text-shadow: 1px 1px 3px #000000;
}

#menu{
  text-align: center;
  height: 40px;
  background-image: -moz-linear-gradient(top, #7f7f7f 3%, #b2b2b2);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #7f7f7f), color-stop(1.0, #b2b2b2));
  background-color: #F0F8FF;
  font-family: 'Open Sans', sans-serif;
  color: white;
  text-shadow: 1px 1px 3px #000000;
}

#searchMenu{
  text-align: center;
  height: 30px;
  background-image: -moz-linear-gradient(top, #7f7f7f 3%, #b2b2b2);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #7f7f7f), color-stop(1.0, #b2b2b2));
  background-color: #F0F8FF;
  font-family: 'Open Sans', sans-serif;
  color: white;
  text-shadow: 1px 1px 3px #000000;
}

#search{
  width: calc(100% - 10px);
  margin: 2px 5px 2px 4px;
  padding: 0;
  resize: none;
  border-radius: 4px;
  height: 25px;
}

#list{
  text-align: center;
  height: calc(100% - 161px);
  background-image: -moz-linear-gradient(top, #e5e5e5 3%, #FFFFFF);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #F2F2F2), color-stop(1.0, #FFFFFF));
  background-color: #F0F8FF;
  font-family: 'Open Sans', sans-serif;
  color: white;
  text-shadow: 1px 1px 3px #000000;
  overflow-y: auto;
  overflow-x: hidden;
}

#footer{
  text-align: center;
  height: 40px;
  background-image: -moz-linear-gradient(top, #e5e5e5 3%, #FFFFFF);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #e5e5e5), color-stop(1.0, #F2F2F2));
  background-color: #F0F8FF;
  font-family: 'Open Sans', sans-serif;
  color: white;
  text-shadow: 1px 1px 3px #000000;
}

.menuItems{
  transition: .5s ease-out;
  margin: 4px 10px 0 35px;
  padding: 3px;
  border: 1px solid gray;
  border-radius: 5px;
  font-size: 18px;
  background: gray;
}
.menuItems:hover{
  transition: .7s ease-in;
  cursor: pointer;
  background: black;
}

.buttons{
  transition: .5s ease-out;
  margin: 4px 10px 0 35px;
  padding: 3px;
  border: 1px solid gray;
  border-radius: 5px;
  font-size: 18px;
  background: #c1c1c1;
  cursor: pointer;
}

.buttons:active{
  transition: .0s ease-in;
  background: black;
}

.radios, .label{
  float: left;
}
.date{
  float: right;
}

.label{
  word-break: break-all;
  max-width:400px;
  font-size: 15px;
  color: black;
  font-weight: bold;
  text-shadow: 0 0 #000;
}

.date, .statusLabel{
  font-size: 13px;
  color: black;
  font-weight: bold;
  text-shadow: 0 0 #000;
}
.status{
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 3px;
}

1 个答案:

答案 0 :(得分：0)

我终于明白了，我隐藏了所有.items，我做了它来测试它，我忘了删除它：/

＆＃13;
＆＃13; 
//SEARCHING

//Searching through #group and gathering all the lists' ids
var IDs = [];
$("#group").find(".items").each(function() {
  IDs.push(this.id);
});
//Searching through #group and gathering all the lists' ids

//Change text when the user hovers on the search
function changeText() {
    var textarea = document.getElementById('search');
    textarea.value = "";
    $('.items').hide();
    if (textarea.value === "") {
      $('.items').show();
    }
  }
  //Change text when the user hovers on the search
$("#search").on('change keyup paste', function() {
  var textarea = document.getElementById('search');

  $('.items').hide();
  if (textarea.value === "") {
    $('.items').show();
  }

  //Compares LABEL and SEARCH
  function matchEmUp(pred, prey, ID) {

      var each1 = '',
        each2 = '',
        acum1 = '',
        acum2 = '';
      for (var i = 0; i < pred.length; i++) {
        each1 = pred.substring(i, i + 1);
        acum1 += each1;
        each2 = prey.substring(i, i + 1);
        acum2 += each2;

        if (acum1 == acum2) {
          //console.log(acum1+"\n"+acum2);
          $('#' + ID).show();
        } else {
          $('#' + ID).hide();
        }
      }
    }
    //Compares LABEL and SEARCH

  var value = ((textarea.value).toLowerCase());
  var array = [];
  var ID = (IDs[i]); //get the list's ID
  var LABEL = [];

  //getting IDs
  for (var i = 0; i < IDs.length; i++) {
    ID = (IDs[i]); //get the list's ID
    LABEL.push(($('#' + ID).children('.label').text()).toLowerCase());
    var SEARCH = value; //get the search node

    matchEmUp($.trim(SEARCH), LABEL[i], ID);
  }


  /*if($.trim(LABEL) == $.trim(SEARCH)){ //compare them
      $('#'+ID).show();//show only the result
    }*/

  //getting IDs

});
//SEARCHING
＆＃13; 
body,
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
ul {
  display: inline-flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
a {
  color: white;
  text-decoration: none;
}
div {
  display: inline-flex;
}
#header {
  text-align: center;
  height: 50px;
  background-image: -moz-linear-gradient(top, #6495ED 3%, #9BC2E6);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #6495ED), color-stop(1.0, #9BC2E6));
  background-color: #F0F8FF;
  font-family: 'Open Sans', sans-serif;
  color: white;
  text-shadow: 1px 1px 3px #000000;
}
#menu {
  text-align: center;
  height: 40px;
  background-image: -moz-linear-gradient(top, #7f7f7f 3%, #b2b2b2);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #7f7f7f), color-stop(1.0, #b2b2b2));
  background-color: #F0F8FF;
  font-family: 'Open Sans', sans-serif;
  color: white;
  text-shadow: 1px 1px 3px #000000;
}
#searchMenu {
  text-align: center;
  height: 30px;
  background-image: -moz-linear-gradient(top, #7f7f7f 3%, #b2b2b2);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #7f7f7f), color-stop(1.0, #b2b2b2));
  background-color: #F0F8FF;
  font-family: 'Open Sans', sans-serif;
  color: white;
  text-shadow: 1px 1px 3px #000000;
}
#search {
  width: calc(100% - 10px);
  margin: 2px 5px 2px 4px;
  padding: 0;
  resize: none;
  border-radius: 4px;
  height: 25px;
}
#list {
  text-align: center;
  height: calc(100% - 161px);
  background-image: -moz-linear-gradient(top, #e5e5e5 3%, #FFFFFF);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #F2F2F2), color-stop(1.0, #FFFFFF));
  background-color: #F0F8FF;
  font-family: 'Open Sans', sans-serif;
  color: white;
  text-shadow: 1px 1px 3px #000000;
  overflow-y: auto;
  overflow-x: hidden;
}
#footer {
  text-align: center;
  height: 40px;
  background-image: -moz-linear-gradient(top, #e5e5e5 3%, #FFFFFF);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #e5e5e5), color-stop(1.0, #F2F2F2));
  background-color: #F0F8FF;
  font-family: 'Open Sans', sans-serif;
  color: white;
  text-shadow: 1px 1px 3px #000000;
}
.menuItems {
  transition: .5s ease-out;
  margin: 4px 10px 0 35px;
  padding: 3px;
  border: 1px solid gray;
  border-radius: 5px;
  font-size: 18px;
  background: gray;
}
.menuItems:hover {
  transition: .7s ease-in;
  cursor: pointer;
  background: black;
}
.buttons {
  transition: .5s ease-out;
  margin: 4px 10px 0 35px;
  padding: 3px;
  border: 1px solid gray;
  border-radius: 5px;
  font-size: 18px;
  background: #c1c1c1;
  cursor: pointer;
}
.buttons:active {
  transition: .0s ease-in;
  background: black;
}
.radios,
.label {
  float: left;
}
.date {
  float: right;
}
.label {
  word-break: break-all;
  max-width: 400px;
  font-size: 15px;
  color: black;
  font-weight: bold;
  text-shadow: 0 0 #000;
}
.date,
.statusLabel {
  font-size: 13px;
  color: black;
  font-weight: bold;
  text-shadow: 0 0 #000;
}
.status {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 3px;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <title>MobileTemplateCalne</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
    }
    ul {
      display: inline-flex;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    a {
      color: white;
      text-decoration: none;
    }
    div {
      display: inline-flex;
    }
    #header {
      text-align: center;
      height: 50px;
      background-image: -moz-linear-gradient(top, #6495ED 3%, #9BC2E6);
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #6495ED), color-stop(1.0, #9BC2E6));
      background-color: #F0F8FF;
      font-family: 'Open Sans', sans-serif;
      color: white;
      text-shadow: 1px 1px 3px #000000;
    }
    #menu {
      text-align: center;
      height: 40px;
      background-image: -moz-linear-gradient(top, #7f7f7f 3%, #b2b2b2);
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #7f7f7f), color-stop(1.0, #b2b2b2));
      background-color: #F0F8FF;
      font-family: 'Open Sans', sans-serif;
      color: white;
      text-shadow: 1px 1px 3px #000000;
    }
    #searchMenu {
      text-align: center;
      height: 30px;
      background-image: -moz-linear-gradient(top, #7f7f7f 3%, #b2b2b2);
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #7f7f7f), color-stop(1.0, #b2b2b2));
      background-color: #F0F8FF;
      font-family: 'Open Sans', sans-serif;
      color: white;
      text-shadow: 1px 1px 3px #000000;
    }
    #search {
      width: calc(100% - 10px);
      margin: 2px 5px 2px 4px;
      padding: 0;
      resize: none;
      border-radius: 4px;
      height: 25px;
    }
    #list {
      text-align: center;
      height: calc(100% - 161px);
      background-image: -moz-linear-gradient(top, #e5e5e5 3%, #FFFFFF);
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #F2F2F2), color-stop(1.0, #FFFFFF));
      background-color: #F0F8FF;
      font-family: 'Open Sans', sans-serif;
      color: white;
      text-shadow: 1px 1px 3px #000000;
      overflow-y: auto;
      overflow-x: hidden;
    }
    #footer {
      text-align: center;
      height: 40px;
      background-image: -moz-linear-gradient(top, #e5e5e5 3%, #FFFFFF);
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, #e5e5e5), color-stop(1.0, #F2F2F2));
      background-color: #F0F8FF;
      font-family: 'Open Sans', sans-serif;
      color: white;
      text-shadow: 1px 1px 3px #000000;
    }
    .menuItems {
      transition: .5s ease-out;
      margin: 4px 10px 0 35px;
      padding: 3px;
      border: 1px solid gray;
      border-radius: 5px;
      font-size: 18px;
      background: gray;
    }
    .menuItems:hover {
      transition: .7s ease-in;
      cursor: pointer;
      background: black;
    }
    .buttons {
      transition: .5s ease-out;
      margin: 4px 10px 0 35px;
      padding: 3px;
      border: 1px solid gray;
      border-radius: 5px;
      font-size: 18px;
      background: #c1c1c1;
      cursor: pointer;
    }
    .buttons:active {
      transition: .0s ease-in;
      background: black;
    }
    .radios,
    .label {
      float: left;
    }
    .date {
      float: right;
    }
    .label {
      word-break: break-all;
      max-width: 400px;
      font-size: 15px;
      color: black;
      font-weight: bold;
      text-shadow: 0 0 #000;
    }
    .date,
    .statusLabel {
      font-size: 13px;
      color: black;
      font-weight: bold;
      text-shadow: 0 0 #000;
    }
    .status {
      width: 10px;
      height: 10px;
      background: red;
      border-radius: 3px;
    }
  </style>
</head>

<body>
  <header id="header">
    <div style="font-size:30px">Title</div>
  </header>
  <section id="menu">
    <ul>
      <li class="menuItems"><a href="#tasks">Tasks</a>
      </li>
      <li class="menuItems"><a href="#addtask">Add Task</a>
      </li>
    </ul>
  </section>
  <section id="searchMenu">
    <textarea id="search" onmouseover="changeText();" maxlength="40">Search Here</textarea>
  </section>
  <section id="list">
    <ul style="display:inline" id="group">
      <li class="items" id="item1" style="border:1px solid blue">

        <input type="radio" name="radios" class="radios" />
        <label class="label">Item</label>
        <br/>

        <label class="statusLabel">Status</label>
        <div class="status"></div>

        <label class="date">12/31/9999</label>
      </li>
      <li class="items" id="item2" style="border:1px solid blue">

        <input type="radio" name="radios" class="radios" />
        <label class="label">Itemite</label>
        <br/>

        <label class="statusLabel">Status</label>
        <div class="status"></div>

        <label class="date">12/31/9999</label>
      </li>
      <li class="items" id="item3" style="border:1px solid blue">

        <input type="radio" name="radios" class="radios" />
        <label class="label">Ite</label>
        <br/>

        <label class="statusLabel">Status</label>
        <div class="status"></div>

        <label class="date">12/31/9999</label>
      </li>

    </ul>
  </section>
  <section id="footer">
    <ul>
      <li class="buttons">Save</li>
      <li class="buttons">Edit</li>
      <li class="buttons">Delete</li>
    </ul>
  </section>
  <script>
    //SEARCHING

     //Searching through #group and gathering all the lists' ids
    var IDs = [];
    $("#group").find(".items").each(function() {
      IDs.push(this.id);
    });
     //Searching through #group and gathering all the lists' ids

     //Change text when the user hovers on the search
    function changeText() {
        var textarea = document.getElementById('search');
        textarea.value = "";
        $('.items').hide();
        if (textarea.value === "") {
          $('.items').show();
        }
      }
      //Change text when the user hovers on the search
    $("#search").on('change keyup paste', function() {
      var textarea = document.getElementById('search');

      $('.items').hide();
      if (textarea.value === "") {
        $('.items').show();
      }

      //Compares LABEL and SEARCH
      function matchEmUp(pred, prey, ID) {

        var each1 = '',
          each2 = '',
          acum1 = '',
          acum2 = '';
        for (var i = 0; i < pred.length; i++) {
          each1 = pred.substring(i, i + 1);
          acum1 += each1;
          each2 = prey.substring(i, i + 1);
          acum2 += each2;

          if (acum1 == acum2) {
            $('#' + ID).show();
          } else {
            $('#' + ID).hide();
          }
        }
      }

      //Compares LABEL and SEARCH
      var value = ((textarea.value).toLowerCase());
      var array = [];
      var ID = (IDs[i]); //get the list's ID
      var LABEL = [];

      //getting IDs
      for (var i = 0; i < IDs.length; i++) {
        ID = (IDs[i]); //get the list's ID
        LABEL.push(($('#' + ID).children('.label').text()).toLowerCase());
        var SEARCH = value; //get the search node

        matchEmUp($.trim(SEARCH), LABEL[i], ID);
      }
      //getting IDs

    });
     //SEARCHING
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题