twitter bootstrap typeahead ví dụ ajax

Tôi đang cố gắng tìm một ví dụ hoạt động của phần tử kiểu chữ bootstrap twitter sẽ thực hiện một cuộc gọi ajax để đưa vào danh sách thả xuống.

Tôi có một ví dụ tự động hoàn thành jquery đang hoạt động xác định url ajax và cách xử lý trả lời

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

Tôi cần thay đổi gì để chuyển đổi nó thành ví dụ về kiểu chữ?

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

Tôi sẽ chờ đợi ' Thêm hỗ trợ nguồn từ xa cho vấn đề kiểu chữ ' được giải quyết.

Chỉnh sửa: typeahead không còn được đóng gói trong Bootstrap 3. Kiểm tra:

• Mô-đun JavaScript kiểu chữ ở đâu trong Bootstrap 3 RC 1?
• typeahead.js

Kể từ Bootstrap 2.1.0 cho đến 2.3.2, bạn có thể làm điều này:

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

Để sử dụng dữ liệu JSON như thế này:

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

Lưu ý rằng dữ liệu JSON phải đúng loại mime (application / json) để jQuery nhận ra nó là JSON.

Bạn có thể sử dụng ngã ba BS typeahead hỗ trợ các cuộc gọi ajax. Sau đó, bạn sẽ có thể viết:

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

Bắt đầu từ 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);
            }
        });
    }
});

Bây giờ bạn có thể tạo một mã thống nhất, đặt các liên kết "json-request" trong mã HTML của bạn.

Tất cả các phản hồi đề cập đến kiểu chữ BootStrap 2, không còn xuất hiện trong BootStrap 3.

Đối với bất kỳ ai khác được hướng dẫn ở đây đang tìm kiếm một ví dụ AJAX bằng cách sử dụng typeahead.js sau Bootstrap mới , đây là một ví dụ hoạt động. Cú pháp hơi khác một chút:

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

Ví dụ này sử dụng cả đề xuất đồng bộ (cuộc gọi đến processSync ) và đề xuất không đồng bộ, vì vậy bạn sẽ thấy một số tùy chọn xuất hiện ngay lập tức, sau đó các tùy chọn khác được thêm vào. Bạn chỉ có thể sử dụng cái này hay cái khác.

Có rất nhiều sự kiện có thể ràng buộc và một số tùy chọn rất mạnh mẽ, bao gồm làm việc với các đối tượng thay vì chuỗi, trong trường hợp đó, bạn sử dụng chức năng hiển thị tùy chỉnh của riêng mình để hiển thị các mục của bạn dưới dạng văn bản.

Tôi đã tăng cường plugin Bootstrap typeahead ban đầu với khả năng ajax. Rất dễ sử dụng:

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

Đây là repo github: Ajax-typeahead

Tôi đã thực hiện một số sửa đổi trên 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")`

và thêm css sau

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

Hoạt động hoàn hảo.

Tôi đang sử dụng phương pháp này

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

Người ta có thể thực hiện cuộc gọi bằng cách sử dụng Bootstrap. Phiên bản hiện tại không có bất kỳ vấn đề cập nhật nguồn nào Sự cố khi cập nhật nguồn dữ liệu kiểu chữ của Bootstrap với phản hồi bài đăng , tức là nguồn bootstrap sau khi cập nhật có thể được sửa đổi một lần nữa.

Vui lòng tham khảo dưới đây để biết ví dụ:

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

Đối với những người tìm kiếm một phiên bản cà phê của câu trả lời được chấp nhận:

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

Tôi đã xem qua bài đăng này và mọi thứ không muốn hoạt động chính xác và cuối cùng ghép các bit lại với nhau từ một vài câu trả lời để tôi có bản demo hoạt động 100% và sẽ dán nó vào đây để tham khảo - dán tệp này vào tệp php và đảm bảo bao gồm trong đúng địa chỉ.

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

Hãy thử điều này nếu dịch vụ của bạn không trả lại đúng tiêu đề loại nội dung / ứng dụng 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);
        });
    }
});

CẬP NHẬT: Tôi đã sửa đổi mã của mình bằng cách sử dụng ngã ba này

ngoài ra thay vì sử dụng $ .each, tôi đã đổi thành $ .map theo đề xuất của Tomislav Markovski

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

    }
});

Tuy nhiên tôi đang gặp một số vấn đề bằng cách nhận được

Uncaught TypeError: Không thể gọi phương thức 'toLowerCase' không xác định

như bạn có thể thấy trên một bài đăng mới hơn, tôi đang cố gắng tìm hiểu ở đây

hy vọng bản cập nhật này sẽ giúp ích cho bạn ...

Tôi không có một ví dụ làm việc cho bạn cũng như tôi không có một giải pháp rất sạch sẽ, nhưng hãy để tôi nói cho bạn biết những gì tôi đã tìm thấy.

Nếu bạn nhìn vào mã javascript cho TypeAhead, nó sẽ trông như thế này:

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

Mã này sử dụng phương thức "grep" của jQuery để khớp với một phần tử trong mảng nguồn. Tôi không thấy bất kỳ nơi nào bạn có thể thực hiện cuộc gọi AJAX, vì vậy không có giải pháp "sạch" nào cho vấn đề này.

Tuy nhiên, một cách hơi khó mà bạn có thể làm là tận dụng lợi thế của phương thức grep hoạt động trong jQuery. Đối số đầu tiên cho grep là mảng nguồn và đối số thứ hai là một hàm được sử dụng để khớp với mảng nguồn (chú ý Bootstrap gọi "đối sánh" bạn đã cung cấp khi bạn khởi tạo nó). Những gì bạn có thể làm là đặt nguồn thành một mảng một phần tử giả và định nghĩa trình so khớp là một hàm có lệnh gọi AJAX trong đó. Bằng cách đó, nó sẽ chạy cuộc gọi AJAX chỉ một lần (vì mảng nguồn của bạn chỉ có một phần tử trong đó).

Giải pháp này không chỉ bị hack mà còn gặp phải các vấn đề về hiệu năng do mã TypeAhead được thiết kế để thực hiện tra cứu trên mỗi lần nhấn phím (các cuộc gọi AJAX chỉ thực sự xảy ra trên mỗi vài lần nhấn phím hoặc sau một khoảng thời gian nhàn rỗi nhất định). Lời khuyên của tôi là hãy dùng thử, nhưng hãy gắn bó với một thư viện tự động hoàn thành khác hoặc chỉ sử dụng điều này cho các tình huống không phải là AJAX nếu bạn gặp phải bất kỳ vấn đề nào.

khi sử dụng ajax, hãy thử $.getJSON()thay vì $.get()nếu bạn gặp vấn đề với việc hiển thị kết quả chính xác.

Trong trường hợp của tôi, tôi chỉ nhận được ký tự đầu tiên của mọi kết quả khi tôi sử dụng $.get(), mặc dù tôi đã sử dụng json_encode()phía máy chủ.

tôi sử dụng $().one() để giải quyết điều này; Khi tải trang, tôi gửi ajax đến máy chủ và chờ đợi để hoàn thành. Sau đó chuyển kết quả cho chức năng. $().one()là quan trọng. Bởi vì buộc typehead.js phải gắn vào đầu vào một lần. xin lỗi vì viết xấu

(($) => {
    
    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();

?>