How to use custom lookup function?

[oshihirii]

I am trying to emulate this jQueryUI autocomplete behaviour (jsFiddle).

This is progress so far...

(Edit: Actually, I think I have managed to emulate the main features - updated codepen link - below is kept for reference).

Below is my array_of_objects schema:

var array_of_objects = [{
  "value": "8322",
  "product_desc": "Licensed Wooden Fish",
  "product_type": "Games",
  "product_attr_01": "998.00",
  "product_attr_02": "703.00"
}, {
  "value": "5586",
  "product_desc": "Fantastic Cotton Salad",
  "product_type": "Games",
  "product_attr_01": "887.00",
  "product_attr_02": "841.00"
}];

I am wanting to use a custom lookup function so that I can:

• Match at the beginning of the value value
• Match anywhere in the product_desc value

I am not understanding something fundamental in how to structure the custom lookup function (I think it must have something to do with the way I am returning matches?).

Once I get this sorted out, I will move onto creating the templated results and highlighting matched text, as shown in the jQueryUI example.

HTML

<input class="my_lookup" placeholder="search...">

JS

$(".my_lookup").autoComplete({
  source: function(term, suggest) {
    // term is what you type
    // suggest is what is returned to the user

    // BEGIN hasMatch() function
    function hasMatch(key_value, match_type) {
      // BEGIN if match_type === "start"
      if (match_type === "start") {
        // check if term is at the 0 index of object's 'value' string
        var is_at_start_of_string =
          key_value.toLowerCase().indexOf(term.toLowerCase()) === 0;
        if (is_at_start_of_string === true) {
          console.log("term is at start of object's 'value' string");
        }
        return is_at_start_of_string;
      } else if (match_type === "anywhere") {
        // END if match_type === "start"

        // BEGIN if match_type === "anywhere"
        // check if term is at any index of object's 'product_desc' string
        var exists_in_string =
          key_value.toLowerCase().indexOf(term.toLowerCase()) !== -1;
        if (exists_in_string === true) {
          console.log("term exists in product_desc string");
        }
        return exists_in_string;
      }
      // END if match_type === "anywhere"
    }
    // END hasMatch() function

    // declare variables
    // the iterator
    var i;
    // a result object
    var obj;
    // the array containing result objects
    var matches = [];

    // BEGIN if term is empty string
    // return an empty array
    if (term === "") {
      console.log("this thing is happening");
      suggest([]);
      return; 
    }
    // END if term is empty string
    // return an empty array

    // get length of array_of_objects
    var array_of_objects_length = array_of_objects.length;

    // for each object in the array, call the hasMatch() function and pass it the object's 'value' and 'product_desc' strings
    for (i = 0; i < array_of_objects_length; i++) {
      obj = array_of_objects[i];
      // if either of the below conditions return true,
      // push the object to the matches array
      if (
        hasMatch(obj.value, "start") ||
        hasMatch(obj.product_desc, "anywhere")
      ) {
        matches.push(obj);
      }
    }

    suggest(matches);
  },
renderItem: function (item, search){
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
var re = new RegExp("(" + search.split(" ").join("|") + ")", "gi");

var new_value_text = item.value.replace(re, "<b>$1</b>"); 
var new_description_text = item.product_desc.replace(re, "<b>$1</b>"); ; 

return "<div class=\"autocomplete-suggestion\"><img src=\"https://placeimg.com/30/30/nature\">" + new_value_text + " - " + new_description_text + "</div>";
}
});