如何使用 vanilla javascript 实现搜索功能？答案

【问题标题】：How to implement search feature using vanilla javascript?如何使用 vanilla javascript 实现搜索功能？
【发布时间】：2018-07-17 19:08:41
【问题描述】：

我制作了一个显示联系人详细信息的联系人列表应用程序。我想实现基于名称的搜索功能。现在，当我输入某人的姓名时，它应该会动态更改联系人列表。

index.html：

var array = [];
function Person(fullName, number, group) {
        this.fullName = fullName;  
        this.number = number;
        this.group =  group;
        array.push(this);
}

Person.prototype.getFullName = function() {
    return this.fullName+' '+this.number+' '+this.group;
}

var p1 = new Person("Jonathan Buell",5804337551,"family");
var p2 = new Person("Patrick Daniel",8186934432,"work");

console.log(array);

/*
function save() {
    localStorage.setItem("array", JSON.stringify(array));
}


function submitToDb() {
    var person = new Person(nameInput.value, numberInput.value, groupInput.value);
   // refresh();
} 

var storedArray = JSON.parse(localStorage.getItem("array"));
function loadLocalStorage() {
    for(var i in storedArray){
        array[i] = storedArray[i]; 
    }
   // refresh(); 
}
loadLocalStorage();
*/

function showContacts() {
    for(var i in array){
        var id = i;
        contactlist.innerHTML +=
        `
        <ul>
        <div>
        <p>Name: `+ array[i].fullName +`</p>
        <p>Number: `+ array[i].number +`</p>
        <p>Group: `+ array[i].group +`</p>
        <button type="button" class="btn btn-warning" onclick="editContact(`+ id +`)">Edit</button>
        <button type="button" class="btn btn-danger">Delete</button>
        </div>
        `
    }
}

showContacts();

function addNew() {
	document.getElementById("search").style.display = 'none';
	document.getElementById("contactlist").style.display = 'none';
	document.getElementById("editcontact").style.display = 'none';
	document.getElementById("addnewcontact").style.display = '';
	document.getElementById("addnewcontact").innerHTML = 
	`
	<form>
      <div class="form-group">
        <label for="inputName">Name</label>
        <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name">
      </div>
       <div class="form-group">
        <label for="inputNumber">Number</label>
        <input type="text" class="form-control" id="inputNumber" aria-describedby="numberhelp" placeholder="Enter Number">
      </div>
      <div class="form-group">
        <label for="inputGroup">Group</label>
        <input type="text" class="form-control" id="inputGroup" aria-describedby="grouphelp" placeholder="Enter Group">
      </div>
      <button type="submit" class="btn btn-primary" onclick="submittoDB()">Submit</button>
    </form>
	`;
}


function editContact(id) {
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactlist").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML = 
        `
        <form>
          <div class="form-group">
            <label for="InputName2">Name</label>
            <input type="text" class="form-control" id="inputName2" aria-describedby="namehelp" value="`+array[id].fullName+`" >
          </div>
          <div class="form-group">
            <label for="InputNumber2">Number</label>
            <input type="text" class="form-control" id="inputNumber2" value="`+array[id].number+`">
          </div>
          <div class="form-group">
            <label for="InputGroup2">Group</label>
            <input type="text" class="form-control" id="inputGroup2" value="`+array[id].group+`">
          </div>
          <button type="submit" class="btn btn-primary" onclick="saveMe(`+id+`)">Submit</button>
        </form>
        `;
}

/*
function saveMe(id) {
    array[id].fullName = document.getElementById("nameInput2").value;
    array[id].number = document.getElementById("numberInput2").value;
    array[id].group = document.getElementById("groupInput2").value;
}
*/

function deleteMe(id) {
    array.splice(id, 1);
   // refresh();
   // save();
}

.header{
	display:flex;
}

.header>div{
	float: left;
}

.header .title{
	padding-left: 400px;
}

.header .dropdown{
	padding-top: 20px;
	padding-left: 20px;
}

.header .button{
	padding-left: 500px;
	padding-top: 5px;
}

.glyphicon-plus-sign{
	font-size: 50px;
}

#search form .input-group{
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 10px;
}

.input-group{
	padding-top: 20px;
}

.form-group{
	padding-left: 30px;
	padding-right: 30px;
}

form .btn-primary{
	margin-left: 30px;
}

<!DOCTYPE html>
<html>
<head>
  <title>Contact List App</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="index.css">
  <script type="text/javascript" src="app.js"></script>
</head>
<body>

  <div class="header">
    
	    <div id="dropdown">
	       <div class="dropdown">
	          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group
	          <span class="caret"></span></button>
	          <ul class="dropdown-menu">
	            <li><a href="#">All</a></li>
	            <li><a href="#">Work</a></li>
	            <li><a href="#">Family</a></li>
	          </ul>
	        </div> 
	    </div>

	    <div class="title">
	      <h2>All Contacts</h2>
	    </div>

	    <div class="button" id="addButton">
	      <p>
	        <a href="#">
	          <span class="glyphicon glyphicon-plus-sign" onclick="addNew()"></span>
	        </a>
	      </p>
	    </div>
    
  </div>

  <div id="search">
     <form>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <i class="glyphicon glyphicon-search"></i>
          </button>
        </div>
      </div>
    </form> 
  </div>


  <div id="contactlist" >
        
  </div>


  <div id="addnewcontact">
  
    
  </div>


  <div id="editcontact">
    
  </div>


  
</body>
</html>

目前我正在用id="contactlist" , id="editcontact" id="addnewcontact"动态填充3个div标签

应用现场演示：https://jsfiddle.net/ap8xvoo7/

应用截图：

【问题讨论】：

很多不相关的代码。我建议做一个简单的列表和输入，这就是演示所需要的。然后，如果您使用此stackoverflow.com/a/9127872/949476，则很容易转换为香草版本。
问题到底是什么？
@Liam 当我在输入框中搜索时说如果我输入J 它应该显示所有以J 开头的联系人，然后如果我输入Jon 那么它应该显示Jonathan 联系人仅限。
这不是问题，看到它没有?？这是你想要什么的声明。那你为什么不能这样做呢？你想从我们这里得到什么信息？
我认为你需要阅读How do I ask a good question?

标签： javascript html

【解决方案1】：

您的 sn-ps 中有很多不相关的代码。但是，一般来说，Array.filter 是你的朋友：

const contacts = [
  { fullName: 'Jonathan Buell', number: 5804337551, group: 'family' },
  { fullName: 'Joey Whatever', number: 5454355351, group: 'family' },
  { fullName: 'Patrick Daniel', number: 8186934432, group: 'work' }
];

contacts.filter(contact => contact.fullName.startsWith('Jo'));
/*
Result:
  [
    { fullName: 'Jonathan Buell', number: 5804337551, group: 'family' },
    { fullName: 'Joey Whatever', number: 5454355351, group: 'family' }
  ]
*/

...但是startsWith 区分大小写，它会返回一个空数组来表示小写的“jo”。

一种解决方案是改用正则表达式：

contacts.filter(contact => contact.fullName.match(/^jo/i));
contacts.filter(contact => contact.fullName.match(/^Jo/i));

/*
The 'i' flag makes matching case-insensitive.
Result is the same as above in both cases. 
*/

您可以轻松创建过滤功能：

const filterContacts = (startLetters, contacts) =>
  contacts.filter(contact =>
    contact.fullName.match(new RegExp(`^${startLetters}`, 'i'))
  );

...并像这样使用它：

filterContacts('jo', contacts);

/*
Result:
  [
    { fullName: 'Jonathan Buell', number: 5804337551, group: 'family' },
    { fullName: 'Joey Whatever', number: 5454355351, group: 'family' }
  ]
*/

filterContacts('pat', contacts);

/*
Result:
  [
     { fullName: 'Patrick Daniel', number: 8186934432, group: 'work' }
  ]
*/

……当然还有将其绑定到搜索输入变化：

searchInput.addEventListener('input', function(event) {
    const startLetters = event.target.value;
    const filteredContacts = filterContacts(startLetters, contacts);
    // …and display filteredContacts in your template
});

工作 sn-p（需要支持 ES2015 的现代浏览器）：

document.addEventListener('DOMContentLoaded', function() {
  const contacts = [
    { fullName: 'Jonathan Buell', number: 5804337551, group: 'family' },
    { fullName: 'Joey Whatever', number: 5454355351, group: 'family' },
    { fullName: 'Patrick Daniel', number: 8186934432, group: 'work' }
  ];

  const filterContacts = (startLetters, contacts) =>
    contacts.filter(contact =>
      contact.fullName.match(new RegExp(`^${startLetters}`, 'i'))
    );

  // populate the list with all contacts after the page is loaded:
  const contactList = document.querySelector('ul');
  contactList.innerHTML = contacts
    .map(contact => `<li>${contact.fullName}, ${contact.number}</li>`)
    .join('');
    
  // filter contacts when user types something into input, and replace the list contents with filtered contacts:  
  document.querySelector('input').addEventListener('input', function(event) {
    const startLetters = event.target.value;
    const filteredContacts = filterContacts(startLetters, contacts);
    contactList.innerHTML = filteredContacts
      .map(contact => `<li>${contact.fullName}, ${contact.number}</li>`)
      .join('');
  });
});

<input />
<ul></ul>

一个小小的好处：如果您想在任何地方搜索，而不仅仅是从头开始（所以 'ni' 将匹配 'Patrick Daniel')，只需从正则表达式中删除 ^。

【讨论】：