Create own searching engine by SUPER NEWBIE (3rd weeks of Bootcamp)

Ok, now I will tell you my stories first...
I studied Codecademy by myself on 4 weeks prep period before Bootcamp start :p

So what I got now is only basic and fundamental(?, lmao) of Javascript knowledge and little CSS, HTML stuff.
And now starting with 3rd week of Bootcamp and that means I only spent 2 weeks there.

Anyway, I am working on a Cloning Instagram project, and wanna materialize searching algorithm from my idea.

There is DB I created already! (just a few numbers of the element in the array)
Looks like this!

const userList = [
  {
    id: "john_doe_1st",
    name: "John Doe First",
    profile: "https://via.placeholder.com/32",
  },
  {
    id: "john_doe_2nd",
    name: "John Doe Second",
    profile: "https://via.placeholder.com/32",
  },
  {
    id: "john_doe_3rd",
    name: "John Doe Third",
    profile: "https://via.placeholder.com/32",
  },
  {
    id: "john_doe_4th",
    name: "John Doe Forth",
    profile: "https://via.placeholder.com/32",
  },
  {
    id: "john_doe_5th",
    name: "John Doe Fifth",
    profile: "https://via.placeholder.com/32",
  },
  {
    id: "john_doe_6th",
    name: "John Doe Sixth",
    profile: "https://via.placeholder.com/32",
  },
];

Here is my idea, for example, I wanna find "wecode" when I type "wcd", "wd", "wc", "ed", "oe" or further.
So what I tried to think about what is a better solution (!algorithm!) here.

So how I approach here is... using the subset finding algorithm.
the subset is if the number is 3, you will have a group of combination such as [1] [2] [3] [1,2] [1,3] [2,3] [1,2,3]!!

So this is my subset algorithm! it's actually based on recursive function!
It's not perfect at all, (NOT optimized at all!!) but at least I can get what I want as a basic DATA!

def dfs(v):
    if v > n:
        for i in range(1, n+1):
            if ch[i] == 1:
                print(i, end=' ')
        print()
    else:
        ch[v] = 1
        # print(ch)
        dfs(v+1)
        # stack v=3, 2, 1
        ch[v] = 0
        # print(ch)
        dfs(v+1)
        
n = int(input())
ch = [0]*(n+1)
print(ch)
dfs(1)

So what I made is if the letter is submitted to function, wanna get every possible combination of the letters as an array
Here is my convert code!

// search Algorithm: (e.g.) coming out "wecode" when searching "wcd"

// search array creater
const searchArrayCreator = (str) => {
  const findLetter = (v) => {
    if (v >= str.length) {
      for (let i = 0; i < str.length; i++) {
        if (checkArray[i] == 1) {
          input += str[i];
        }
      }
    } else {
      checkArray[v] = 1;
      findLetter(v + 1);
      // recursive + stack
      input += "/";
      checkArray[v] = 0;
      findLetter(v + 1);
      allCond.push(input);
    }
  };

  const checkArray = [];
  for (i in str) {
    checkArray.push(0);
  }
  let input = "";
  let allCond = [];
  findLetter(0);
  const result = allCond[allCond.length - 1].split("/");
  return result;
};

Now what I get is matching input value and DB data.

But the problem is...
There is no way to clear the list items!

I try every forLoop way, even reassign DOM object every event trigger,
I can not delete every single element.

When I check the console, I think the DOM event is not good for getting newly generated items...
of course, that is my level of understanding or a lot of reason.

So, what I did is Delete ul then single li !
But what is funny is still old(deleted) ul can get as an Object with remained li items which I wanna delete!

So I just create a new empty Ul then reassign the same Object variable name!
and The result is grreeeeeaaaat!!!
there is no such an old history of the searching list!

This is my final result, I didn't optimize (refactoring? yet)
But it's easy to understand!

// searchArray application from existing db
const allConditionDB = userList.map((user) => searchArrayCreator(user.id));
// console.log(allConditionDB);

// search update
getSearchBox.addEventListener("keyup", () => {
  //event trigger
  if (getSearchBox.value != "") {
    // something input on search box

    // initialize to empty ul list remove => create new ul
    getSearchUl.remove();
    getSearchUl = document.createElement("ul");
    getSearchUl.classList.add("user-list");
    getUlParent.append(getSearchUl);

    // Loop one array from multiple Array (here is 6 loop!)
    allConditionDB.forEach((conArray) => {
      if (conArray.includes(getSearchBox.value)) {
        // check input value with condition array elements; the first element of condition array is full text

        const li = document.createElement("li");
        userList.forEach((user) => {
          // matching userdata from original DB with the first element from the array matched with input value

          // then show the search result
          if (user.id == conArray[0]) {
            li.insertAdjacentHTML(
              "beforeend",
              `
              <div class="li-avatar">
                <img
                src="${user.profile}"
                alt="userAvatar"
                class="li-pic"
                />
              </div>
              <div class="user">
                <span>${user.id}</span>
                <span>${user.name}</span>
              </div>
              `
            );
            getSearchUl.append(li);
          }
        });
      }
    });
  } else {
    // if there is no input on searchbox

    // initialize to empty ul list remove => create new ul
    getSearchUl.remove();
    getSearchUl = document.createElement("ul");
    getSearchUl.classList.add("user-list");
    getUlParent.append(getSearchUl);

    // default list item created
    const emptyLi = document.createElement("li");
    emptyLi.classList.add("empty-list");
    emptyLi.innerHTML = "No results found.";

    // append default list item first then...
    getSearchUl.append(emptyLi);
  }
});