Typeahead和Laravel没有返回任何结果

时间:2017-09-13 19:37:46

标签: php laravel laravel-5 typeahead.js bootstrap-typeahead

我正在尝试设置Typeahead.js,以便在我的Laravel应用程序中用作自动提示功能。不幸的是,每次都没有返回任何结果。

我事先返回数据以利用本地存储,因此我的实例中没有查询数据库。

路线:

Route::get('/', function () {
    return view('welcome', ['treatments' => Treatment::orderBy('treatment')
        ->pluck('treatment', 'id')]);
});

欢迎观点:

const treatments = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: '{{$treatments}}'
  });

  $('#bloodhound').typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    },
    {
      name: 'treatments',
      source: treatments,

      templates: {
        empty: [
          '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
        ],
        header: [
          '<div class="list-group search-results-dropdown">'
        ]

      }
    }).on('typeahead:selected', function (evt, item) {
    $('#bloodhound').text(item.id);
  });

输入字段:

<input type="search" name="treatment" id="bloodhound" class="form-control" 
        placeholder="Find a treatment" autocomplete="off" required>

$treatments数组的输出:

local: '{&quot;2&quot;:&quot;Treatment 1&quot;}'

脚本的最后一部分应该在输入字段中输入选择(ID)的值,但不幸的是,它也不起作用。

非常感谢。

1 个答案:

答案 0 :(得分:0)

没有字符串local: '{&quot;2&quot;:&quot;Treatment 1&quot;}'对你来说很奇怪吗?

首先,它通过htmlspecialchars发送,所有引号都变成&quote;,第二个 - local的值是一个字符串。你认为,打字可以理解你在这里有什么吗?

解决方案:从元素中获取数据库并输出&#39; em json-encoded。为避免引用转义使用{!! !!}

const treatments = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: {!! $treatments !!}
});

路线:

Route::get('/', function () {
    return view(
        'welcome', 
        ['treatments' => Treatment::orderBy('treatment')->pluck('treatment', 'id')->toJson()]
    );
});