Jquery Typeahead tidak memaparkan hasil carian

Hari ini, terpaksa menghadap isu dari plugin ini https://twitter.github.io/typeahead.js/ . Ketika hantaran ini ditulis (atau lebih tepat ditaip), plugin ini masih diversi 0.11.1.

Masalah plugin ini adalah, apabila hasil dari json lebih kecil dari had yang ditetapkan. Sebagai contoh, sekiranya kita hadkan hanya papar 5 baris hasil carian, sekiranya hasil carian tersebut bersamaan dengan 5 atau kurang dari 5, typeahead akan trigger untuk paparkan “Result Not Found.

Ada dua jalan penyelesaian yang boleh digunakan.
1. Penggunaan limit:Infinity

var bestPictures = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '../data/films/post_1960.json',
  remote: {
    url: '../data/films/queries/%QUERY.json',
    wildcard: '%QUERY'
  }
});

$('#remote .typeahead').typeahead(null, {
  name: 'best-pictures',
  display: 'value',
  limit:Infinity,
  source: bestPictures
});

Isu penggunaan limit:Infinity adalah anda perlu menguruskan had pada bahagian pelayan sekiranya ada menggunakan cara remote.

Jadi saya mencadangkan cara yang kedua, kita ubah terus fail typeahead.bundle.js

Lihat baris 1707 hingga 1727

Baris 1715

if (rendered < that.limit && that.async) {

Tukar kepada

if (rendered <= that.limit && that.async) {

Baris 1721

if (!canceled && rendered < that.limit) {

Tukar kepada

if (!canceled && rendered <= that.limit) {

Baris 1723 dan 1724

rendered += suggestions.length;
that._append(query, suggestions.slice(0, that.limit - rendered));

Tukar kepada

that._append(query, suggestions.slice(0, that.limit));
rendered += suggestions.length;

Untuk baris 1723 & 1724, sumber rujukan disini (https://stackoverflow.com/a/35935557)

Harapnya dapat membantu sekiranya anda menghadapi masalah yang sama dengan saya.

Untuk memahami masalah ini dengan lebih mendalam boleh rajin-rajinlah membaca disini.

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.