I wrote a program that searches the array between people and displays the result in the elements Sorry, this program does not work because it does not recognize the function this.showResultSearch
Search codes have no problem, it does not work Please Guide me to the conclusion
This is part of my program code that does not work and confuses me. Please edit my code correctly.
I do not want the location of the functions to change
I use the pattern builder template in this program and I want the location of the functions and the program to work the same way.
Please test the app
function ElementBuilder(name) {
this.element = document.createElement(name);
this.appendTo = function (id) {
this.appendElement = document.getElementById(id).append(this.element);
return this
}
this.addEventListener = function (event, fun) {
this.element.addEventListener(event, fun);
return this;
};
this.text = function (text) {
this.element.textContent = text;
return this;
};
this.build = function () {
return this.element;
};
};
const builder = {
create: function (name) {
return new ElementBuilder(name);
}
};
function PhoneBook() {
this.array = [
{ name: "nadiya", phone: 123456 }, { name: "amir", phone: 123456 },
{ name: "niloufar", phone: 123456 }, { name: "arman", phone: 123456 },
{ name: "sara", phone: 123456 }, { name: "pariya", phone: 123456 }];
const self = this;
this.search = function () {
const selectInput = document.getElementById("inputSearch").value;
const validStr = /[A-Za-z]{2,}/;
const validInput = validStr.test(selectInput);
if (!validInput) alert("To search, it must be more than 2 characters and use letters")
else {
const result = self.array.filter((obj) => {
return obj.name.toUpperCase().includes(selectInput.toUpperCase())
});
if (result.length === 0) {
alert("Contact not found")
} else {
return result;
}
}
};
};
function Render(container) {
this.container = container;
const phoneBook = new PhoneBook();
this.startSearch = function () {
this.showResultSearch()
};
const callSearch = phoneBook
.search();
this.init = function () {
const buttonSe = builder
.create("button")
.appendTo("formserch")
.text("search App")
.addEventListener("click", () => this.startSearch())
.build();
}
this.showResultSearch = function () {
const searchResult = callSearch;
if (searchResult && searchResult.length > 0) searchResult.forEach((ele) => {
const nameContent = builder
.create('p')
.text(`${ele.name}`)
.appendTo("showSearch")
.build();
const phoneContent = builder
.create('p')
.text(`${ele.phone}`)
.appendTo("showSearch")
.build();
});
}
}
const phoneBookContainer = document.getElementById("phone-book-container");
const app = new Render(phoneBookContainer);
app.init();
<form id="formserch">
<input type="text" placeholder="Search" id="inputSearch">
</form>
<div id="showSearch"></div>