Gửi lựa chọn trên Bootstrap typeahead() autocomplete?

Làm cách nào để tự động gửi lựa chọn được thực hiện với Twitter Bootstrap typeahead() ??Gửi lựa chọn trên Bootstrap typeahead() autocomplete?

http://twitter.github.com/bootstrap/javascript.html#typeahead

Nguồn

2012-02-24 Nathan Waters

Nếu bạn vẫn đang tìm kiếm, tôi đã tạo một tiện ích mở rộng cho plugin Typeahead để thêm một số chức năng giống như chức năng bạn đã hỏi. https://github.com/tcrosen/Bootstrap-Typeahead-Extension – Terry

Dường như có một vài yêu cầu hợp nhất git. Công cụ này thực hiện công việc và cho phép bạn gửi một loạt các đối tượng đến lỗi đánh máy: https://github.com/twitter/bootstrap/pull/1751

Nguồn

2012-02-25 09:06:48

ya Tôi hiểu đó không phải là giải pháp tốt nhất có thể. Nhưng đó là điều duy nhất tôi có thể nghĩ đến như một sự sửa chữa tạm thời. – Jako

Có thể không phải là giải pháp tốt nhất, nhưng tôi chỉ cố gắng này vào thiết lập typeahead tôi tại địa phương và nó làm việc.

Nếu typeahead của bạn trông giống như thế này ...

<form id="test-form" method="post" action=""> 
      <input id="test-input" type="text" data-provide="typeahead" 
      data-source='["1","2',"3"]' /> 
    </form>

Sau đó bạn có thể gửi nó với javascript này.

<script type="text/javascript"> 
     $('#test-input').change(function() { 
      $('#test-form').submit(); 
     }); 
    </script>

Nguồn

2012-02-24 06:07:10 Jako

Hmm vừa thử nó. Chỉ có vẻ hoạt động khi tôi trực tiếp chọn tùy chọn, nhưng không phải khi tôi nhấn enter hoặc tab để chọn. –

Tôi đã thêm một cuộc gọi lại blur vào đầu vào. Lưu ý rằng bạn cần chờ một khoảng thời gian ngắn, lỗi đánh máy đó có thể thay đổi giá trị trong đầu vào và cuộc gọi lại blur không được gọi trước đó. Nó chỉ là một cách giải quyết, nhưng nó hoạt động.

$('input.myTypeaheadInput').blur(function(e) { 
    window.setTimeout(function() { 
     window.console && console.log('Works with clicking on li item and navigating with the keyboard. Yay!'); 
    }, 50); 
});

Nguồn

2012-05-18 07:51:57 mAu

Có một cách sạch sẽ bằng cách sử dụng updater callback:

input.typeahead({ 
    'source' : ['foo', 'bar'], 
    'updater' : function(item) { 
     this.$element[0].value = item; 
     this.$element[0].form.submit(); 
     return item; 
    } 
});

Khi người dùng chọn một tùy chọn (bằng cách click chuột hoặc bàn phím), gọi lại populates hộp nhập liệu và gửi biểu mẫu.

Nguồn

2013-03-02 21:16:45 erenon

Đáng buồn thay, lựa chọn tuyệt vời này dường như không xuất hiện trong các bản dựng gần đây .. –

Nếu bạn sử dụng typeahead.js cắm ngoài (khuyến khích cho Bootstrap 3):

Để kích hoạt một hình thức trên một số chỉ cần sử dụng các sự kiện tùy chỉnh.

$('#my-input') 
    .typeahead({/* put you options here */}) 
    .on('typeahead:selected', function(e){ 
    e.target.form.submit(); 
    });

Thông tin thêm về sự kiện tùy chỉnh here và giới thiệu về JSfiddle.

Nguồn

2013-08-28 09:13:24 HaNdTriX

đã cứu mạng tôi @HaNdTriX – Kathan

Tôi rất vui khi biết điều đó. :-) – HaNdTriX

Để cư trú một giá trị của một trường ẩn trong một hình thức html từ sự chọn lựa dữ liệu typeahead, tôi đã làm như sau:

$('#prefetch').typeahead({ 
hint: true, 
highlight: true, 
minLength: 1 
}, 
{ 
name: 'trees', 
source: trees, 
limit: 15 
}).on('typeahead:selected', function(e) { 
var result = $('#prefetch').val() 
$('#formpane input[name=\"myID\"]').val(result) 
});

Để tham khảo, đây là đoạn code html:

<body> 
<div id="formpane"> 
    <form action="/thanks" method="POST"> 
    <input class="typeahead" type="text" placeholder="select categories" id="prefetch"> 
    <button type="submit">Submit</button> 
    <input type="hidden" name="myID" /> 
    </form> 
</div> 
<script type="text/javascript" src="js_file_above.js"></script> 
</body>

Nguồn

2015-06-15 22:38:42

Gửi lựa chọn trên Bootstrap typeahead() autocomplete?

Trả lời

Các vấn đề liên quan