arrays - Displaying a message when item not found in search input - JavaScript -
i'm new javascript , working on creating basic applications. trying "not found" message display if there no contact found matching name entered in search input user. app loops through contacts array still display "no contact found" message. understand due conditional statement's "else" statement when loops through object in array , user input not match particular object on. "not found" message ends displaying default because other object's "names" property in array not match user search input loops through objects.
what want know is, how message display only after has looped through of object's names in contact array and did not find matches? feel i'm missing simple. there value can return if loop finds no matches in order display message if value returns?
bonus question: also, how contact information display name if @ least few characters match user search input? ex: user enters in "dav" , 1 of contact's names "david smith".
if need more clear, please let me know!
here html , js app...
html:
<body> <header>address book</header> <div id="searchbutton"> <input name="searchinput" type=text id="searchinput"><button id="button">search</button> </div> <h2 id="notfound"></h2> <ul id="contactinfo"> <li>name:<span id="contactname"></span></li> <li>phone:<span id="contactnumber"></span></li> <li>e-mail:<span id="contactemail"></span></li> </ul> <script src="js/index.js"></script> </body> the portion of javascript i'm focused on in question:
//displays #notfound function notfound() { var notfound = document.getelementbyid("notfound"); notfound.innerhtml = "person not found in address book"; } addressbook.prototype.searchcontains = function() { var searchinput = document.getelementbyid("searchinput").value; (var = 0; < this.contacts.length; i++) { //if name in address book if (searchinput === this.contacts[i].name) { this.contacts[i].listhtml(); break; } else { notfound(); } } }; here of javascript reference, if needed:
//contact object function contact (name, number, email) { this.name = name; this.number = number; this.email = email; } //display's contact information in list spans contact.prototype.listhtml = function() { var contactname = document.getelementbyid("contactname"); var contactnumber = document.getelementbyid("contactnumber"); var contactemail = document.getelementbyid("contactemail"); contactname.innerhtml = this.name; contactnumber.innerhtml = this.number; contactemail.innerhtml = this.email; }; //displays #notfound function notfound() { var notfound = document.getelementbyid("notfound"); notfound.innerhtml = "person not found in address book"; } //address book object function addressbook() { this.contacts = []; } //add contact function addressbook.prototype.add = function(contact) { this.contacts.push(contact); }; //fucntion check see if address book object contains user search addressbook.prototype.searchcontains = function() { var searchinput = document.getelementbyid("searchinput").value; (var = 0; < this.contacts.length; i++) { //if name in address book if (searchinput === this.contacts[i].name) { this.contacts[i].listhtml(); break; } else { notfound(); } } }; //contacts var roman = new contact("roman kozak", "412-812-1216", "romankozakjr@gmail.com"); var lauren = new contact("lauren kozak", "724-544-5376", "kozaklauren@gmail.com"); //creation of address book object var addressbook = new addressbook(); addressbook.add(roman); addressbook.add(lauren); //when name entered in search box input , search button clicked var searchinput = document.getelementbyid("searchinput").value; var button = document.getelementbyid("button"); button.addeventlistener("click", function(){ addressbook.searchcontains(); });
change searchcontains function one:
addressbook.prototype.searchcontains = function() { // erases not found message of previous search attempt // (you move function if you'd to) var notfound = document.getelementbyid("notfound"); notfound.innerhtml = ""; var searchinput = document.getelementbyid("searchinput").value; (var = 0; < this.contacts.length; i++) { //if name in address book, list , exit search function if (searchinput === this.contacts[i].name) { this.contacts[i].listhtml(); return; } } // if execution reaches point, means search value // hasn't been found notfound(); }; as bonus question try using indexof function, replacing condition in if statement this
this.contacts[i].name.indexof(searchinput) != -1 
Comments
Post a Comment