Cannot change HTML content dynamically using JavaScript input search?

Question

I have used a search box to search contact details of persons. There are 4 contacts initially:

1)"Jonathan Buell",5804337551,"family"

2)"Patrick Daniel",8186934432,"work"

3) "Lorraine Winter",3138211928,"work"

4) "Constance Reed",3138211928,"family"

Lets say now if I type j in input box it should show only Jonathan Buell if I type Lorr in input then it should display Lorraine Winter contact details. If the string does not match if user types xyz then it should not display any contact.

I tried to implement above search feature but it does not change the content dynamically no change is observed.

Index.html:

var array = [];

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

var p1 = new Person("Jonathan Buell", 5804337551, "family");
var p2 = new Person("Patrick Daniel", 8186934432, "work");
var p3 = new Person("Lorraine Winter", 3138211928, "work");
var p4 = new Person("Constance Reed", 3138211928, "family");

console.log(array);

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 search() {
  var search = document.getElementById("search").value;

  contactlist.innerHTML = '';

  for (var i in array) {
    if (array[i].fullName.toLowerCase().includes(search.toLowerCase())) {
      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>
               </ul>
               `;
    }
  }
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>

  <div class="input-group">
    <input type="text" id="search" class="form-control" placeholder="Search">
  </div>
  </form>
  </div>

  <div id="contactlist">

  </div>


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

</body>

</html>

Screenshot of my app :

You really shouldn't tether a class constructor to push to an external array, but rather push `new Person(...)` into the array. — Sterling Archer, Feb 07 '18 at 14:43
You use in your javascript code the `´ to wrap html code. Maybe this is one reason for you problem. — Reporter, Feb 07 '18 at 14:44
I do not see any event attached to your search input change calling `search()` — Striped, Feb 07 '18 at 14:45
Side-note, don't do this: `
Name: \`+ array[i].fullName + \`
`, the whole advantage of [template strings is interpolation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). Instead, do `
Name: ${array[i].fullName}
` — msanford, Feb 07 '18 at 14:46
@Striped Why to call `search()` lets say if I type `j` then it should dynamically change contact list and show `Jonathan Buell` as `j` matches to `J` of `Jonathan Buell` — stone rock, Feb 07 '18 at 14:47
@SterlingArcher lets say if I type j then it should dynamically change contact list and show Jonathan Buell as j matches to J of Jonathan Buell. — stone rock, Feb 07 '18 at 14:49
this appears to be pretty much the [exact same question you asked one hour before this one](https://stackoverflow.com/questions/48664728/how-to-implement-search-feature-using-vanilla-javascript). Please don't ask the same question multiple times, edit the original if you need to. — Liam, Feb 08 '18 at 10:05
Possible duplicate of [How to implement search feature using vanilla javascript?](https://stackoverflow.com/questions/48664728/how-to-implement-search-feature-using-vanilla-javascript) — Liam, Feb 08 '18 at 10:05

score 1 · Accepted Answer · answered Feb 07 '18 at 15:01

1

you can use this one, it works perfect with jquery

$(".search").on("input",function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;

        // Loop through the comment list
        $("#contactlist .main_div").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();

                // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });
    });

and when you add divs, give a class to the parent div like this

for (var i in array) {
    if (array[i].fullName.toLowerCase().includes(search.toLowerCase())) {
      var id = i;
      contactlist.innerHTML =
        `
                        <ul>
                        <div class="main_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>
                        </ul>
                        `;
    }
  }
}

answered Feb 07 '18 at 15:01

andrew

83
1
14

with the class that you add you can loop through each user, just try it and let me know – andrew Feb 07 '18 at 15:09
I am trying to replicate the feature from this project -> https://github.com/snwolak/contact-list-app/blob/4c525e35146afd987c6e6f4edda0bf0fb44af333/src/app.js#L181 Check the live demo -> https://snwolak.github.io/contact-list-app/ – stone rock Feb 07 '18 at 15:09
did you saw the demo and the code for `search()` it is not called explicitly but it still works in demo why so ? – stone rock Feb 07 '18 at 15:11
this is the same, just try it – andrew Feb 07 '18 at 15:12
see fiddle (https://jsfiddle.net/tj0gcnf4/10/) I made with your example , it works perfect – andrew Feb 07 '18 at 15:18
I want to implement it in vanill JS and not using jquery can you please tell me how to do it using vanilla JS your jquery code works like a charm that's what I am trying to implement but using vanilla JS. Why is my ocde not working as I am doing same thing mentioned here -> https://github.com/snwolak/contact-list-app/blob/4c525e35146afd987c6e6f4edda0bf0fb44af333/src/app.js#L181 – stone rock Feb 07 '18 at 15:22
My solution is to implement Jquery into your project and you will have no prob, I am not familiar with that example that you mentioned – andrew Feb 07 '18 at 15:25

score 1 · Answer 2 · answered Feb 07 '18 at 15:03

1

On its own, your search input knows nothing of your JavaScript array or its contents. And your search() function is never called; placing an id of search on your input doesn't associate that input with the function.

What you can do is add an event listener to your search input which listens for the enter keypress, after which point your array of people can be filtered.

Something like this:

// You imported jQuery, so you may as well use $("#search") instead of document.getElementById("search")
var search_input = $('#search')

search_input.keydown(function (event) {
    if (event.which === 13) {
        // If the enter key was pressed
        search()
    }
})

function search(event) {
    event.preventDefault();

    var search_val = search_input.val();

    contactlist.innerHTML = '';

    for(var i in array) {
        if (array[i].fullName.toLowerCase().includes(search_val.toLowerCase())) {
            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>
                </ul>
            `;
        }
    }
}

answered Feb 07 '18 at 15:03

SalTor

23
8

I am trying to replicate the feature from this project -> https://github.com/snwolak/contact-list-app/blob/4c525e35146afd987c6e6f4edda0bf0fb44af333/src/app.js#L181 Live demo of the project can be seen here -> https://snwolak.github.io/contact-list-app/ – stone rock Feb 07 '18 at 15:09
did you saw the demo and the code for search() it is not called explicitly but it still works in demo why so ? – stone rock Feb 07 '18 at 15:12
1

The reason why that works in the demo is because in `index.html` their input has an attribtue of `onkeyup="search()"` – SalTor Feb 07 '18 at 15:25
So should I call `search()` in my input then will it work ? – stone rock Feb 07 '18 at 15:26
Yes, but you won't get suggestions without additional code – SalTor Feb 07 '18 at 15:28
with `onkey="search()"` it works like a charm now :) thanks – stone rock Feb 07 '18 at 15:29
I'm glad to hear it! – SalTor Feb 07 '18 at 15:33

Cannot change HTML content dynamically using JavaScript input search?

2 Answers2