Issues with search bar filter, using JS/JQuery in laravel blade template

Question

I have a blade template with a search bar, which has no submit button and is used for filtering. However, I can't seem to get it to filter appropriately, as the page was originally using angular (which has been removed completely).

My page displays all of my products using foreach loops and displays the info from variables in my page controller (pulling everything from the database and storing as variables). Anyway, everything displays fine but I need help getting this to filter properly.

Basically, if a term entered in the search bar is anywhere in the JSON object gathered by the controller, then I want it to only display those objects. I may even need another foreach loop.

Here's the html/blade code:

<!--Search bar div-->
<div class="uk-width-5-10">

        <div class="md-input-wrapper search-form">
            <form id="searchProducts">
                <input type="text" class="md-input label-fixed" name="srch-term" id="srch-term" autofocus placeholder="Search Products"/>
                <span class="md-input-bar"></span>

            </form>
        </div>

<!--foreach loops around the wrapper that shows products, for reference-->
@foreach ($orderFormData->pgroups as $pgroup)
   @foreach ($pgroup->image_names as $image_name)
      @foreach ($pgroup->pskus as $psku)

Javascript for the search (see the variable for the JSON object, that's what I need to search within)

<script>   
    var orderFormData = <?php echo json_encode ($tempdata);?>;
</script>

<script>
    var orderData = orderFormData // default value
    var search = function (e) {
        var term = e.currentTarget.value
        orderData = Object.entries(orderFormData).reduce(function (data, entry) {
            if (entry[0].match(term) || entry[1].match(term)) {
                data[entry[0]] = entry[1]
            }

            return data
        }, {})

        console.log(orderData)
    }

    document.querySelector('#srch-term').addEventListener('keyup', search)
</script>

Is there a better way I should be doing this? I may even need to do a foreach loop around the search bar

Answer 1

It kind of sounds like you're looking for an auto complete. Have you looked at the jquery-ui-autocomplete library? It's pretty easy to implement, and might add more functionality more easily than writing loops yourself.

https://jqueryui.com/autocomplete/

I'll get into why I named the function below, but here's my implementation:

          monkeyPatchAutocomplete();
            $("#your_searchbox_selector").autocomplete({
              source: // http://Your_Search_URL_endpoint_here,
              delay: 500, // prevents search from running on *every* keystroke
              minLength: 1, // default is 2, change or remove as you like

              // open page after selecting (with enter key).
              select: function( event, ui )
                {
                  var qval = ui.item.id // this pulls whatever field you're looking for in your JSON that you want to use to direct your user to the new page, in my case "id";
                  var url = 'http://whereever_you_want_your_user_to_go?';
                  window.location = url + qval;
                }
            });

For my implementation, I wanted to color code the results in my autocomplete list with active and inactive entries, so my search controller JSON result includes 3 fields:

'value' => $searchable_values, 'id' => $id_mapping_of_whatever, 'class' => $css_classes_to_use

My search controller plugs in emails, names, and phone numbers to the value field, which is searchable, then maps an id, and plugs in css classes that I use to change the text color of the results through a monkeypatch on jQuery's autocomplete:

       function monkeyPatchAutocomplete()
        {
          $.ui.autocomplete.prototype._renderItem = function( ul, item)
            {
              var re = new RegExp(this.term, 'i');
              var t = item.label.replace(re,"<span class='autocomplete-span'>" + this.term + "</span>");

              return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a class='text-" + item.class + "'>" + t + "</a>" )
                .appendTo( ul )
            };
          };

If you're interested in formatting your results, check out dev.e.loper's answer to: How can I custom-format the Autocomplete plug-in results?.