javascript - 预先输入 Bloodhound 排序返回值。

Question

我正在使用 Twitter 输入，但发现很难划分 mysql 查询的结果。

我的 json 输出如下所示:{"id":"1","name":"Bravo"}

在当前状态下，typeahead 中的结果显示名称和 id ，我希望能够仅显示名称，但输入的实际提交值是 id。我的脚本如下:

<script type="text/javascript">
// Instantiate the Bloodhound suggestion engine
var suggestions = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'includes/livesearch.php?key=%QUERY',       
        wildcard: '%QUERY',
        filter: function (name) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(name, function (name) {
                return {
                    value: name
                };
            });
        }
    }
});
// Initialize the Bloodhound suggestion engine
suggestions.initialize();

// Instantiate the Typeahead UI
$('.typeahead').typeahead({
    hint: true,
    minLength: 2
}, {
    limit: 7,
    displayKey: 'value',
    source: suggestions.ttAdapter(),
});
</script>

非常欢迎任何帮助或建议我如何实现这一目标。

谢谢!

Answer 1

您可以创建一个对象来存储当前检索到的值。在filter Bloodhound的选项将对象属性设置为 name.name ，并将值设置为 name.id .

仅返回并显示name检索到的属性JSON ，使用index $.map()的参数检查对象的属性名称。如果属性是"name"返回{value:name} ，否则返回null .

使用typeahead:selected设置 <input type="hidden"> 值的事件<form> 内的元素使用 .typeahead 的当前值input作为先前存储的初始返回值对象的属性引用 filter 。设置将值存储到空对象的变量引用。

 <form>
   <input class="typeahead" type="text" placeholder="search">
   <input type="hidden" name="result" value="" />
   <input type="submit">
 </form>

$(function() {
  // Instantiate the Bloodhound suggestion engine
  var curr = {};
  var suggestions = new Bloodhound({
    datumTokenizer: function(datum) {
      return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'includes/livesearch.php?key=%QUERY',       
        wildcard: '%QUERY',
        filter: function (name) {
          curr[name.name] = name.id;
            // Map the remote source JSON array to a JavaScript object array
            return $.map(name, function (name, index) {
                return index === "name" ? {
                    value: name
                } : null;
            });
        }
    }

  });
  // Initialize the Bloodhound suggestion engine
  suggestions.initialize();

  // Instantiate the Typeahead UI
  $(".typeahead").typeahead({
    hint: true,
    minLength: 2
  }, {
    limit: 7,
    displayKey: 'value',
    source: suggestions.ttAdapter(),
  })
  .on("typeahead:selected", function (e, datum) {
    $("form [name=result]").val(curr[datum.value]); // set value here
    curr = {};
  });
})

plnkr http://plnkr.co/edit/PJjzxemAQ9fO3P5YBfXi?p=preview