пример начальной загрузки Twitter aaax

Question

Я пытаюсь найти рабочий пример элемента twitter bootstrap typeahead , который будет выполнять вызов ajax для заполнения его выпадающего списка.

У меня есть работающий пример автозаполнения jquery, который определяет URL-адрес ajax и способ обработки ответа

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { minChars:3, max:20 };
    $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

Что мне нужно изменить, чтобы преобразовать это в пример typeahead?

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { source:'/index/runnerfilter/format/html', items:5 };
    $("#runnerquery").typeahead(options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

Я собираюсь дождаться решения проблемы ' Добавление поддержки удаленных источников для typeahead '.

Answer 1

Попробуйте, если ваша служба не возвращает правильный заголовок типа приложения / json:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            var json = JSON.parse(data); // string to json
            return process(json.options);
        });
    }
});

Answer 2

ОБНОВЛЕНИЕ: я изменил свой код, используя this fork

, а также вместо $ .each я изменил на $ .map в соответствии с предложением Томислава Марковского

$('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data, item){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'name',
    items:11,
    onselect: function (obj) {

    }
});

Однако я сталкиваюсь с некоторыми проблемами, получая

Uncaught TypeError: Невозможно вызвать метод 'toLowerCase' из неопределенного

, как вы можете видеть в новом сообщении, которое я пытаюсьвыяснить здесь

надеюсь, что это обновление поможет вам ...

Answer 3

я использую $().one() для решения этой проблемы;Когда страница загружена, я отправляю ajax на сервер и жду, когда все будет готово.Затем передайте результат в функцию. $().one() важен. Потому что принудительно typehead.js присоедините к входу один раз.извините за плохое письмо.

(($) => {
    
    var substringMatcher = function(strs) {
        return function findMatches(q, cb) {
          var matches, substringRegex;
          // an array that will be populated with substring matches
          matches = [];
      
          // regex used to determine if a string contains the substring `q`
          substrRegex = new RegExp(q, 'i');
      
          // iterate through the pool of strings and for any string that
          // contains the substring `q`, add it to the `matches` array
          $.each(strs, function(i, str) {
            if (substrRegex.test(str)) {
              matches.push(str);
            }
          });
          cb(matches);
        };
      };
      
      var states = [];
      $.ajax({
          url: 'https://baconipsum.com/api/?type=meat-and-filler',
          type: 'get'
      }).done(function(data) {
        $('.typeahead').one().typeahead({
            hint: true,
            highlight: true,
            minLength: 1
          },
          {
            name: 'states',
            source: substringMatcher(data)
          });
      })
      

})(jQuery);

.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
}

.tt-suggestion:hover {
    color: #f0f0f0;
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}

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

<input class="typeahead" type="text" placeholder="where ?">

Answer 4

 $('#runnerquery').typeahead({
        source: function (query, result) {
            $.ajax({
                url: "db.php",
                data: 'query=' + query,            
                dataType: "json",
                type: "POST",
                success: function (data) {
                    result($.map(data, function (item) {
                        return item;
                    }));
                }
            });
        },
        updater: function (item) {
        //selectedState = map[item].stateCode;

       // Here u can obtain the selected suggestion from the list


        alert(item);
            }

    }); 

 //Db.php file
<?php       
$keyword = strval($_POST['query']);
$search_param = "{$keyword}%";
$conn =new mysqli('localhost', 'root', '' , 'TableName');

$sql = $conn->prepare("SELECT * FROM TableName WHERE name LIKE ?");
$sql->bind_param("s",$search_param);            
$sql->execute();
$result = $sql->get_result();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
    $Resut[] = $row["name"];
    }
    echo json_encode($Result);
}
$conn->close();

?>

Answer 5

при использовании ajax, попробуйте $.getJSON() вместо $.get(), если у вас возникли проблемы с правильным отображением результатов.

В моем случае я получил только первый символ каждого результата, когда использовал $.get(), хотя я использовал json_encode() на стороне сервера.

Answer 6

У меня нет рабочего примера для вас, и у меня нет очень чистого решения, но позвольте мне рассказать вам, что я нашел.

Если вы посмотрите на код JavaScript для TypeAhead, он выглядитнапример:

items = $.grep(this.source, function (item) {
    if (that.matcher(item)) return item
  })

Этот код использует метод "grep" jQuery для сопоставления элемента в исходном массиве.Я не видел ни одного места, где вы могли бы подключиться к вызову AJAX, так что нет «чистого» решения для этого.

Однако, один несколько хакерский способ, которым вы можете это сделать, - воспользоваться этим способом.метод grep работает в jQuery.Первым аргументом grep является исходный массив, а вторым аргументом является функция, которая используется для сопоставления исходного массива (обратите внимание, что Bootstrap вызывает «соответствие», которое вы указали при его инициализации).То, что вы могли бы сделать, это установить источник в фиктивный одноэлементный массив и определить совпадение как функцию с вызовом AJAX.Таким образом, он будет запускать вызов AJAX только один раз (поскольку ваш исходный массив содержит только один элемент).

Это решение не только хакерское, но оно будет страдать от проблем с производительностью, поскольку разработан код TypeAheadвыполнять поиск по каждому нажатию клавиши (вызовы AJAX должны выполняться только после нескольких нажатий клавиш или после определенного времени простоя).Я советую попробовать, но придерживайтесь другой библиотеки автозаполнения или используйте ее только в ситуациях, не связанных с AJAX, если у вас возникнут какие-либо проблемы.