Use select-box value in the remote property (parameter) of Typeahead.js

Question

I have put together an application that makes use of Typeahead.js and a select-box containing American states.

As the docs show, the library has remote property.

I want to add the value of the selected option of my select-box to remote:

var chooseState = function() {
  var jud = '',
    stateChoice = $('.cm-state').find('option:selected'),
    stateText = stateChoice.text(),
    jud = stateChoice.val();
  console.log(jud);

  if (jud == '') {
    $('#display').hide();
  } else {
    $('#display').fadeIn(150);
  }
  $('#choice span').text(stateText);
  $('#choiceVal span').text(jud);
}

$('.cm-state').on('change', chooseState);

$('input.typeahead').typeahead({
  name: 'typeahead',
  remote: 'search.php?key=%query&jud=' + jud,
  limit: 11,
  // My addition
  complete: chooseState
});

<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input class="typeahead" type="text" placeholder="Choose State">
</div>

<div>
  <select class="cm-state">
    <option value="">- Choose state -</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="CA">California</option>
  </select>
</div>

<div id="display">
  <p id="choice">State name: <span></span></p>
  <p id="choiceVal">State code: <span></span></p>
</div>

I get a jud is not defined error message instead.

Making the jud variable global with window.jud = stateChoice.val(); does not solve the problem either.

What am I missing?

Answer 1

First of all, you should fetch jQuery from cdn before fetching typeahead

Secondly, you are declaring jud variable inside the chooseState function, thus it can't be accessed from the typeahead init function on line 20 where you wrote the $('input.typeahead').typeahead({

Check the snippet below.

var jud = ''; // declare 'jud' variable here, so it's global in the first place;
var chooseState = function() {
  // don't declare 'jud' here as it will become local variable for chooseSate function only;
  var stateChoice = $('.cm-state').find('option:selected'),
    stateText = stateChoice.text();
  // seperate jud from var declaration now, just update the global one;
  jud = stateChoice.val();
  console.log(jud);

  if (jud == '') {
    $('#display').hide();
  } else {
    $('#display').fadeIn(150);
  }
  $('#choice span').text(stateText);
  $('#choiceVal span').text(jud);
}

$('.cm-state').on('change', chooseState);

$('input.typeahead').typeahead({
  name: 'typeahead',
  remote: 'search.php?key=%query&jud=' + jud,
  limit: 11,
  // My addition
  complete: chooseState
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- jQuery first, and then typeahead -->
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<div>
  <input class="typeahead" type="text" placeholder="Choose State">
</div>

<div>
  <select class="cm-state">
    <option value="">- Choose state -</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="CA">California</option>
  </select>
</div>

<div id="display">
  <p id="choice">State name: <span></span></p>
  <p id="choiceVal">State code: <span></span></p>
</div>