Sử dụng TypeAhead với jQuery và Bootstrap 2.1

Question

Trong phiên bản 2.1 of Twitter Bootstrap, khả năng chuyển một chức năng gọi lại trong tùy chọn Typeahead was added. Tuy nhiên, tôi đã có một thời gian khó khăn nhận được điều này để làm việc với một cuộc gọi jQuery ajax.

Đây là những gì tôi có cho đến nay.

HTML

<form class="form-horizontal" action=""> 
    <fieldset> 
     <div class="control-group"> 
      <label class="control-label" for="myTypeahead">User</label> 
      <div class="controls"> 
       <input type="text" id="myTypeahead" /> 
      </div> 
     </div> 
    </fieldset> 
</form> 

JavaScript (thiết lập trong hàm jQuery $(document).ready)

$("#myTypeahead").typeahead({ 
    source: function (query, process) { 
    $.ajax({ 
     type: "POST", 
     url: ServiceURL + "/FindUsers", 
     data: "{ SearchText: '" + query + "' }", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (r1) { 
     var users = []; 
     if (r1.d.Records) { 
      $(r1.d.Records).each(function (index, val) { 
      users.push(val.User.Name); 
      }); 
      console.log(users); 
      process(users); 
     } 
     } 
    }); 
    } 
}); 

Khi tôi gõ test (hoặc Test) trong đầu vào Typeahead, không có kết quả Typeahead được hiển thị , nhưng dữ liệu được ghi lại từ biến số users trông giống như sau:

["Test User A", "Test User B", "Test User C", "Test User D", "Test User E", "Test User F"] 

Tại sao tính năng này không hoạt động?

Ngoài ra, để tham khảo, đây là Typeahead JavaScript for Bootstrap.

Answer 1

Tôi đã tìm ra. Biểu mẫu HTML (được liệt kê trong câu hỏi) được hiển thị trong hộp thoại phương thức và div kết quả Typeahead xuất hiện phía sau hộp thoại phương thức.

Hóa ra kết quả đã được trả về và hiển thị, nhưng vùng chứa kết quả đánh máy chỉ không hiển thị.

Để khắc phục nó, tôi thêm vào CSS này:

.typeahead { 
    z-index: 1100; 
} 

Answer 2

Các z-index làm việc trong phiên bản 2.3.1 của bootstrap, nhưng các menu Typeahead được vẫn bị cắt gọn nếu họ mở rộng ra ngoài biên giới của hộp thoại theo một trong hai hướng.

Như một sửa chữa, thêm CSS này sau khi tải bootstrap.css:

/* Fix for Bootstrap dialog typeahead cut-off */ 
.modal-body { 
    overflow: visible; 
} 

Answer 3

$('#activity').typeahead({ 
         itemSelected:function(data,value,text){ 
          console.log(data) 
          alert('value is'+value); 
          alert('text is'+text); 
         },              
         ajax: { 
          url: "/path/to/destination", 
          timeout: 500, 
          displayField: "activity", 
          triggerLength: 2, 
          method: "get", 
          loadingClass: "loading-circle", 
          preDispatch: function (query) { 
           //showLoadingMask(true); 
           return { 
            search: query 
           } 
          }, 
          preProcess: function (data) { 
           //showLoadingMask(false); 
           if (data.success === false) { 
            // Hide the list, there was some error 
            return false; 
           } 
           // We good!    
           return data.mylist; 
          } 
         } 
}); 

Bạn có thể sử dụng trên mã để có được công việc typehead. Đảm bảo bạn đang trả lại dữ liệu JSON theo định dạng sau data.mylist phải ở đó để làm việc với mã ở trên.