twitter bootstrap typeahead Пример ajax

Question

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

У меня есть существующий рабочий JQuery автозаполнения пример, который определяет Аякса URL к и как обрабатывать ответ

<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]; 
       } 
      ); 
     .. 

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

<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]; 
       } 
      ); 
     .. 

Я буду ждать «Add remote sources support for typeahead» вопрос будет решен.

Answer 1

Редактировать: typeahead больше не поставляется в Bootstrap 3. Выезд:

• Where is the typeahead JavaScript module in Bootstrap 3 RC 1?
• typeahead.js

По Bootstrap 2.1.0 до 2.3.2, вы можете сделать это:

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

Чтобы использовать данные в формате JSON, как это:

{ 
    "options": [ 
     "Option 1", 
     "Option 2", 
     "Option 3", 
     "Option 4", 
     "Option 5" 
    ] 
} 

Обратите внимание, что данные JSON должны быть о f правильный тип mime (application/json), поэтому jQuery распознает его как JSON.

Answer 2

Я сделал некоторые изменения на Jquery-ui.min.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;   
} 

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

Answer 3

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

Если вы посмотрите на яваскрипт кода для машинописного это выглядит следующим образом:

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

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

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

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

Answer 4

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

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

Answer 5

Я дополненной оригинальный машинописный Bootstrap плагин с АЯКС возможностями. Очень проста в использовании:

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

Вот GitHub репо: Ajax-Typeahead

Answer 6

UPDATE: Я изменил мой код, используя this вилку

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

$('#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: Cannot call method 'toLowerCase' of undefined

, как вы можете видеть на новой должности я пытаюсь выяснить here

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

Answer 7

Начиная с Bootstrap 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-запрос" ссылки в HTML-код.

Answer 8

С помощью Bootstrap можно совершать звонки. В текущей версии отсутствуют какие-либо проблемы с обновлением исходного кода. Trouble updating Bootstrap's typeahead data-source with post response , то есть источник перезагрузки после обновления может быть снова изменен.

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

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, 
}); 

Answer 9

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

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

Answer 10

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

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

Answer 11

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

<?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> 

Answer 12

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

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

Answer 13

Всех ответов сослаться на Bootstrap 2 машинописных, который больше не присутствует в Bootstrap 3.

Для тех, кто еще режиссера здесь ищет Пример AJAX с использованием нового post-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) и асинхронное предложение, так что вы увидите некоторые опции появляются сразу, то другие будут добавлены. Вы можете просто использовать один или другой.

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

Answer 14

Попробуйте это, если ваша служба не возвращает правильный тип приложения/содержание 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 15

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

>