Jquery, matching values without an exact match-CodePudding

I have a working jquery code block where I'm taking the value from an html input and checking it against json values for a match.

It currently works if there's an exact match, so in the example below, I'd have to fully type 123 or 155 to get a result, but I want to get this to where typing '1' would show both and the like (basically look for matches without strings being fully typed or exact), like a standard autocomplete.

What am I doing wrong here?

var stores=[{
  "id": "123",
  },{
  "id": "155"
  }
];

function searchStores() {
  var foundStores = [];
  var value = document.getElementById('ss').value;

  console.log(value);

  if(value){
    stores.forEach(function (store,index) {
      var id = store.id;
      console.log(id);
      if(id == value){
        foundStores.push(store);
      };
    });
  }else{
    foundStores = stores;
  }
  console.log(foundStores);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="ss" type="text" name="locationSearch" placeholder="search" style="border-radius:18px; padding:4px; width: 80%;" />

CodePudding user response：

Your line

if (id == value) {

does an equality comparison, so the values must match exactly. As your id is a string rather than a number, you can use string indexOf()

if (id.indexOf(value) >= 0) {

newer (current) versions of browsers could also use string includes()

if (id.includes(value)) {

Updated snippet (with an event handler to see it working):

var stores = [{
  "id": "123",
}, {
  "id": "155"
}];

function searchStores() {
  var foundStores = [];
  var value = document.getElementById('ss').value;

  //console.log(value);

  if (value) {
    stores.forEach(function(store, index) {
      var id = store.id;
      //console.log(id, store, index);
      if (id.indexOf(value) >= 0) {
        foundStores.push(store);
      };
    });
  } else {
    foundStores = stores;
  }
  console.log(foundStores);
};

$("#ss").on("input", function() {
  searchStores();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="ss" type="text" name="locationSearch" placeholder="search" style="border-radius:18px; padding:4px; width: 80%;" />

<div id='result'></div>

CodePudding user response：

Basically what you are trying to achieve is to get your stores array and filter it by the text you type. For that purpose, I suggest you use array filter method which iterates the whole array and returns a new array that satisfy some condition - in your case, the id contains the text you are typing

var stores = [{
  "id": "123",
}, {
  "id": "155"
}];

function searchStores(event) {
  var text = event.data;
  var resultStores = stores.filter(store => store.id.includes(text));
  console.log(resultStores)
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input oninput="searchStores(event)" type="text" name="locationSearch" placeholder="search" style="border-radius:18px; padding:4px; width: 80%;" inpit/>