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标签

App live demo：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'< / em>），只需从正则表达式中删除^。

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

1 个答案: