twitter bootstrap typeahead ajax пример

можно использовать BS typeahead fork который поддерживает вызовы ajax. Тогда вы сможете написать:

$('.typeahead').typeahead({
    source: function (typeahead, query) {
        return $.get('/typeahead', { query: query }, function (data) {
            return typeahead.process(data);
        });
    }
});

начиная с начальной загрузки 2.1.0:

HTML:

<input type='text' class='ajax-typeahead' data-link='your-json-link' />

Javascript:

$('.ajax-typeahead').typeahead({
    source: function(query, process) {
        return $.ajax({
            url: $(this)[0].$element[0].dataset.link,
            type: 'get',
            data: {query: query},
            dataType: 'json',
            success: function(json) {
                return typeof json.options == 'undefined' ? false : process(json.options);
            }
        });
    }
});

теперь вы можете сделать единый код, разместив ссылки "json-request" в своем HTML-коде.

все ответы относятся к BootStrap 2 typeahead, который больше не присутствует в BootStrap 3.

для тех, кто еще направлен сюда ищет пример AJAX, используя новый пост-Bootstrap Twitter typeahead.js, вот рабочий пример. Синтаксис немного отличается:

$('#mytextquery').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  limit: 12,
  async: true,
  source: function (query, processSync, processAsync) {
    processSync(['This suggestion appears immediately', 'This one too']);
    return $.ajax({
      url: "/ajax/myfilter.php", 
      type: 'GET',
      data: {query: query},
      dataType: 'json',
      success: function (json) {
        // in this example, json is simply an array of strings
        return processAsync(json);
      }
    });
  }
});

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

есть много привязываемых событий и некоторые очень мощные параметры, включая работу с объектами, а не со строками, и в этом случае вы будете использовать свой собственный дисплей функции для отображения элементов в виде текста.

я расширил оригинальный плагин Typeahead Bootstrap с возможностями ajax. Очень проста в использовании:

$("#ajax-typeahead").typeahead({
     ajax: "/path/to/source"
});

вот репозиторий github:Ajax-Typeahead

Я сделал некоторые изменения в jQuery-ui.минута.js:

//Line 319 ORIG:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").appendTo(d(...
// NEW:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").addClass("typeahead").addClass("dropdown-menu").appendTo(d(...

// Line 328 ORIG:
this.element.addClass("ui-menu ui-widget ui-widget-content ui-corner-all").attr...
// NEW:this.element.attr....

// Line 329 ORIG:
this.active=a.eq(0).children("a")
this.active.children("a")
// NEW:
this.active=a.eq(0).addClass("active").children("a")
this.active.removeClass("active").children("a")`

и добавить следующий css

.dropdown-menu {
    max-width: 920px;
}
.ui-menu-item {
    cursor: pointer;        
}

работает идеально.

можно совершать вызовы с помощью Bootstrap. Текущая версия не имеет каких-либо проблем с обновлением источника проблема обновления источника данных Typeahead Bootstrap с ответом post , т. е. Источник bootstrap после обновления может быть снова изменен.

пожалуйста, обратитесь к ниже для примера:

jQuery('#help').typeahead({
    source : function(query, process) {
        jQuery.ajax({
            url : "urltobefetched",
            type : 'GET',
            data : {
                "query" : query
            },
            dataType : 'json',
            success : function(json) {
                process(json);
            }
        });
    },
    minLength : 1,
});

для тех, кто ищет версию coffeescript принятого ответа:

$(".typeahead").typeahead source: (query, process) ->
  $.get "/typeahead",
    query: query
  , (data) ->
    process data.options

Я прошел через этот пост, и все не хотело работать правильно и в конечном итоге собрал биты вместе из нескольких ответов, поэтому у меня есть 100% рабочая демонстрация и вставлю ее здесь для справки - вставьте это в файл php и убедитесь, что includes находятся в нужном месте.

<?php if (isset($_GET['typeahead'])){
    die(json_encode(array('options' => array('like','spike','dike','ikelalcdass'))));
}
?>
<link href="bootstrap.css" rel="stylesheet">
<input type="text" class='typeahead'>
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('index.php?typeahead', { query: query }, function (data) {
            return process(JSON.parse(data).options);
        });
    }
});
</script>

Я использую этот метод

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
    {
    name: 'options',
    displayKey: 'value',
    source: function (query, process) {
        return $.get('/weather/searchCity/?q=%QUERY', { query: query }, function (data) {
            var matches = [];
            $.each(data, function(i, str) {
                matches.push({ value: str });
            });
            return process(matches);

        },'json');
    }
});

обновление: я изменил свой код с помощью этой вилки

и вместо использования $.каждый я изменил на $.карта, предложенная Томиславом Марковским

$('#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 ' из undefined

Как вы можете видеть на новом посте я пытаюсь выяснить здесь

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

попробуйте это, если ваша служба не возвращает правильный заголовок типа контента application/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);
        });
    }
});

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

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

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

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

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

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

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

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

я использую $().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 ?">

 $('#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();

?>