如何使用香草JavaScript实现搜索功能？

Question

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

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/

应用的屏幕截图：

Answer 1

您的摘要中有许多无关的代码。 但是，通常， 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
});

工作片段（需要具有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 Da ni el'相匹配），只需从正则表达式中删除^ 。

如何使用香草JavaScript实现搜索功能？

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-02-07 14:33:04

如何使用香草JavaScript实现搜索功能？

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-02-07 14:33:04

解决方案1
1 已采纳 2018-02-07 14:33:04