Jquery UI: Autcomplete combining/filtering arrays

crispybagel · July 5, 2020

To simplify: i want to translate the text() content of the selected muscles into combining arrays with the same name and use them as my source for the autocomplete function. e.g. if Biceps and Triceps are selected (clicked on and have the selected class applied to them) then the variable arrays defined in jquery called Biceps and Triceps should be merged into a new variable that is used as the autocomplete source.

Hi, i've been struggling a while trying to create an autocomplete function that uses the correct array depending on what the user has chosen previously. I've got multiple muscles that the user can choose and depending on which of these are chosen, the autocomplete should display only values from arrays matching those choices. What i've got so far is an autocomplete function and a variable that takes the text() from the chosen muscle elements and displays them as an array. My next thought was to take this arrays values and create a new array containing one/multiple preexisting arrays but i'm not sure how to do it.

I've got one array for each muscle and their name is identical to the text() content of my divs so what i wanted to do is create a new array using merge() and the selected_muscles array but that only produces an array like this [biceps, triceps] (if those are chosen) instead of containing all the values in the two array variables called biceps and triceps.

The user clicks on one or several of these muscles which applies the class "selected".

<div class="musclegroups">
    <h1 class="sectiontitle">Choose Muscle Groups</h1>
    <div class="biceps muscle">Biceps</div>
    <div class="triceps muscle">Triceps</div>
    <div class="shoulders muscle">Shoulders</div>
    <div class="chest muscle">Chest</div>
    <div class="back muscle">Back</div>
    <div class="legs muscle">Legs</div>
    <div class="abs muscle">Abs</div>
  </div>

$(".muscle").click(function() { /* Add/Remove selected class to musclegroups */
    if ($(this).hasClass("selected"))
      $(this).removeClass("selected");
    else
      $(this).addClass("selected");
  });

This function gets the text from the selected muscles and returns them as an array.

var selected_muscles = $(".muscle.selected").map(function(){ /* get selected muscles and return as an array */
      return $(this).text();
    }).get();

This is the autocomplete function using Jquery UI

$(".ex-name").autocomplete({
      source: /* Insert array that consists of the selected muscles chosen */
    },{
      autofocus: false,
      delay: 0,
      minLength: 1
    });