在 Typeahead.js 的远程属性（参数）中使用 select-box 值

Question

我整理了一个使用 Typeahead.js 和包含美国各州的 select-box 的应用程序。

如文档所示，图书馆有 remote 属性.

我想将我的 select-box 的 selected 选项 的值添加到 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>

我收到 jud is not defined 错误消息。

使用 window.jud = stateChoice.val(); 使 jud 变量成为全局变量也不能解决问题。

我错过了什么？

Answer 1

首先，你应该先从cdn中获取jQuery，然后再获取typeahead

其次，您在 chooseState 函数内声明了 jud 变量，因此无法从 20 行的 typeahead init 函数访问它写了 $('input.typeahead').typeahead({

检查下面的代码段。

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>

在 Typeahead.js 的远程属性（参数）中使用 select-box 值

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

javascript

jquery

typeahead.js

在 Typeahead.js 的远程 属性（参数）中使用 select-box 值

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

javascript

jquery

typeahead.js

在 Typeahead.js 的远程属性（参数）中使用 select-box 值