autocomplete jquery function

Question

What I'm trying to do is use jquery autocomplete and display the title if matches title or keywords This is the code I have but I can't get it to work the way I need it to, I have been able to make it search title if i throw it in a regular array but not title and keywords. Any help would be excellent, thanks in advance.

var VideoNames = [{title: "superman", keywords: "super man hero movie"}]

$("#searchbox").autocomplete({
    source: VideoNames,
    select: function (event, ui) {
        $("#searchbox").val(ui.item.value);
        TrainingVideos.search(ui.item.value);
    }
});

Konrad Kalemba · Accepted Answer · 2018-07-18 19:26:06Z

1

To achieve such result you should use function variation of source property of autocomplete's settings object. The function will be called each time input's value changes. Therefore you need to return an array of matched titles. To do so create a new RegExp object with request term as pattern. Then using the RegExp object match both title and keywords of items of the original array. Lastly map them to show just titles. Here is the result:

const videos = [
  {
    title: "superman",
    keywords: "super man hero movie"
  },
  {
    title: "batman",
    keywords: "batmobile driving guy"
  },
  {
    title: "captain america",
    keywords: "hero star us"
  }
]

$("#searchbox").autocomplete({
  source (request, response) {
    const matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i")
    
    response(
      videos
        .filter(item => matcher.test(item.title + item.keywords))
        .map(item => item.title)
    )
  }
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<input id="searchbox">

answered Jul 18, 2018 at 19:26

Konrad Kalemba

1,23913 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tony Over a year ago

I wish I could give you more rep then just one! But thank you very much!

Konrad Kalemba Over a year ago

@Tony You're welcome. :) Also you can accept the answer.

Tony Over a year ago

Thanks again, I just did

Collectives™ on Stack Overflow

autocomplete jquery function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related