How to optimize site search?

Question

JavaScript

Hello everyone. I am writing an educational online store based on the lessons of Alex Luschenko (whoever understood will understand).
I wrote such a classic search for products, but the entire list of json is displayed in the search bar at once, and when you enter the first letters of the name, only the very first products in json are displayed. How can this be optimized or maybe there is some useful article, how best to write a search? Thank you.

$(document).ready(function(){
   $('#search').keyup(function(){
      $('#result').html('');
      var searchField = $('#search').val();
      var expression = new RegExp(searchField,  "i");
      $.getJSON('cargo.json', function(data){
        $.each(data, function(key, value){
          if(value.name.search(expression) != -1 || value.location.search(expression) != -1)
          { 
            $('#result').append('<li style="list-style-type: none;margin:2px;border-bottom:1px solid #333;"><a href="'+key+'" title=""><img src="'+value.img+'" height:"40" width="40">'+value.name+'</a></li>')
          }
        });
      });
   });
});

Answer 1

Look, in the code above, you do two things for each button click:
- a request to get a json file,
- you calculate which elements you need to draw in the list.
1. I assume that cargo.json does not change when you enter text in the search box, right? So there is no point in reading it every time over the network. Those. you can query its contents once, and then store the result in memory (in a variable). Render elements accordingly, filtering this result.
2. No one ever needs to search for something from 1-2 characters. Therefore, usually enter the minimum length of the search phrase, starting from which the search is performed. For example, it can be 3 characters. Those. only by entering 3 characters or more in the field, the user will start the search.
3. People type at different speeds. Someone needs 10 seconds to enter the word "product" in the search, and someone can do it in 1 second ... And in the second case, it is absolutely not necessary to perform the described actions 5 times (for each character). Therefore, if "too little time" elapses between pressings, the previous one can be neglected. This is the so-called. delay time . As a rule, 300-500 ms is enough.
4. Of course, in online stores, goods are stored not in static files (as in the example), but in databases. Imagine if there are a billion products in the store, and everything will be stored in a huge json file. In your implementation, you will need to read this, say, 10Mb file and then filter on this billion lines. Therefore, the search mechanism is always implemented by means of the backend . As a result, a search string is sent to a specific endpoint, and the results that you render are received in response.
PS. I intentionally did not write a single line of code here, because this is a training project, which means that you yourself must implement these moments (1-3). If anything, you can look at the source codes of ready-made solutions, they will also implement the above: https://github.com/search?l=JavaScript&q=autocompl...

Answer 2

In your case, the problem is more likely in the formulation of the problem. In order to optimize something, you need to understand:
1. End result
2. Current result
In the question, even more questions arise:
1. What do you mean by classic search?
2. The very first is how much? What result do you want to achieve?