Untitled

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
* {
  list-style: none;
  padding: 0;
  margin: 0;
}
div {
  text-align: center;
  padding-top: 20px;
}
ul {
  padding-top: 20px;
  width: 30%;
  margin: 0 50% 0 35%;
}
li {
  padding: 3px;
  border: 1px solid silver;
  box-shadow: 1px 1px;
}
</style>
</head>

<body>
  <div>
    <input type="text" id="txt">
    <button type="button" id="btn">search</button>
    <ul id="list">
    </ul>
  </div>
<script id="jsbin-javascript">
var oTxt = document.getElementById('txt');
var oBtn = document.getElementById('btn');
var oList = document.getElementById('list');
var fruits = ["桃子", "苹果", "梨子", "香蕉", "香瓜", "葡萄", "柠檬", "橘子", "草莓"];

// 点击事件
oBtn.addEventListener('click', function() {
  var keyWord = oTxt.value;
  // var fruitList = searchByIndexOf(keyWord,fruits);
  console.log(fruitList);
  var fruitList = searchByRegExp(keyWord, fruits);
  renderFruits(fruitList);
}, false);

// 回车查询
oTxt.addEventListener('keydown', function(e) {
  if (e.keyCode == 13) {
    var keyWord = oTxt.value;
    var fruitList = searchByIndexOf(keyWord, fruits);
    //var fruitList = searchByRegExp(keyWord, fruits);
    renderFruits(fruitList);
  }
}, false);

// 渲染数据
function renderFruits(list) {
  if (!(list instanceof Array)) {
    return;
  }
  oList.innerHTML = '';
  var len = list.length;
  var item = null;
  for (var i = 0; i < len; i++) {
    item = document.createElement('li');
    item.innerHTML = list[i];
    oList.appendChild(item);
  }
}

// 模糊查询方法1: 利用字符串的indexOf方法
function searchByIndexOf(keyWord, list) {
    if (!(list instanceof Array)) {
      return;
    }
    var len = list.length;
    var arr = [];
    for (var i = 0; i < len; i++) {
      // 如果字符串中不包含目标字符会返回-1
      // 模糊匹配的时候如果不区分大小写，可以使用toLowerCase()或者toUpperCase()转换之后去匹配
      if (list[i].indexOf(keyWord) >= 0) {
        arr.push(list[i]);
      }
    }
    return arr;
  }
  // 模糊查询方法2: 正则匹配
function searchByRegExp(keyWord, list) {
  if (!(list instanceof Array)) {
    return;
  }
  var len = list.length;
  var arr = [];
  var reg = new RegExp(keyWord);
  for (var i = 0; i < len; i++) {
    // 如果字符串中不包含目标字符会返回-1
    if (list[i].match(reg)) {
      arr.push(list[i]);
    }
  }
  return arr;
}
renderFruits(fruits);
</script>


<script id="jsbin-source-css" type="text/css">* {
  list-style: none;
  padding: 0;
  margin: 0;
}
div {
  text-align: center;
  padding-top: 20px;
}
ul {
  padding-top: 20px;
  width: 30%;
  margin: 0 50% 0 35%;
}
li {
  padding: 3px;
  border: 1px solid silver;
  box-shadow: 1px 1px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var oTxt = document.getElementById('txt');
var oBtn = document.getElementById('btn');
var oList = document.getElementById('list');
var fruits = ["桃子", "苹果", "梨子", "香蕉", "香瓜", "葡萄", "柠檬", "橘子", "草莓"];

// 点击事件
oBtn.addEventListener('click', function() {
  var keyWord = oTxt.value;
  // var fruitList = searchByIndexOf(keyWord,fruits);
  console.log(fruitList);
  var fruitList = searchByRegExp(keyWord, fruits);
  renderFruits(fruitList);
}, false);

// 回车查询
oTxt.addEventListener('keydown', function(e) {
  if (e.keyCode == 13) {
    var keyWord = oTxt.value;
    var fruitList = searchByIndexOf(keyWord, fruits);
    //var fruitList = searchByRegExp(keyWord, fruits);
    renderFruits(fruitList);
  }
}, false);

// 渲染数据
function renderFruits(list) {
  if (!(list instanceof Array)) {
    return;
  }
  oList.innerHTML = '';
  var len = list.length;
  var item = null;
  for (var i = 0; i < len; i++) {
    item = document.createElement('li');
    item.innerHTML = list[i];
    oList.appendChild(item);
  }
}

// 模糊查询方法1: 利用字符串的indexOf方法
function searchByIndexOf(keyWord, list) {
    if (!(list instanceof Array)) {
      return;
    }
    var len = list.length;
    var arr = [];
    for (var i = 0; i < len; i++) {
      // 如果字符串中不包含目标字符会返回-1
      // 模糊匹配的时候如果不区分大小写，可以使用toLowerCase()或者toUpperCase()转换之后去匹配
      if (list[i].indexOf(keyWord) >= 0) {
        arr.push(list[i]);
      }
    }
    return arr;
  }
  // 模糊查询方法2: 正则匹配
function searchByRegExp(keyWord, list) {
  if (!(list instanceof Array)) {
    return;
  }
  var len = list.length;
  var arr = [];
  var reg = new RegExp(keyWord);
  for (var i = 0; i < len; i++) {
    // 如果字符串中不包含目标字符会返回-1
    if (list[i].match(reg)) {
      arr.push(list[i]);
    }
  }
  return arr;
}
renderFruits(fruits);</script></body>

</html>