Bootstrap 3 typeahead.js - truy vấn bởi một phần của typeahead val

Question

Tôi đang cố gắng gọi url từ xa của tôi với phần cuối cùng của giá trị đầu vào. Tôi muốn làm điều gì đó như thế này:

$('#typeahead').typeahead({ 
    remote: { 
     url: '/ajax/tags/get/?name=%QUERY', 
     replace: function (url, query) { 
      var last = query.split(','); 
      last = $.trim(last[last.length-1]); 
      return url.replace('%QUERY', last); 
     } 
    }, 
    limit : 10 
}); 

và khi mục thả xuống chọn,

thêm giá trị mới nhằm chấm dứt của dòng

Bất kỳ ý tưởng làm thế nào để làm cho công việc đó?

Answer 1

Đối với Bootstrap 3, bạn có thể sử dụng Bootstrap-3-Typeahead.

Bạn sẽ phải ghi đè các hàm updater và matcher. Đối với matcher chức năng bạn có thể sử dụng mã từ thay thế chức năng của bạn như sau:

matcher: function (item) { 
     var last = this.query.split(','); 
     this.query = $.trim(last[last.length-1]); 

     if(this.query.length) return ~item.toLowerCase().indexOf(this.query.toLowerCase()); 
} 

Sử dụng đoạn mã sau cho bạn update: (xảy ra trận đấu cuối cùng từ: JavaScript: replace last occurrence of text in a string)

updater: function (item) { 
     return this.$element.val().replace(new RegExp(this.query + '$'),'') + item + ','; 
    } 

Ví dụ hoàn chỉnh:

$('.typeahead').typeahead (
{ 
items: 4, 
source: function (query, process) { 
    states = []; 
    map = {}; 


    var data = [ 
     {"stateCode": "CA", "stateName": "California"}, 
     {"stateCode": "AZ", "stateName": "Arizona"}, 
     {"stateCode": "NY", "stateName": "New York"}, 
     {"stateCode": "NV", "stateName": "Nevada"}, 
     {"stateCode": "OH", "stateName": "Ohio"} 
    ]; 

    $.each(data, function (i, state) { 
     map[state.stateName] = state; 
     states.push(state.stateName); 
    }); 

    process(states); 

} 

    , updater: function (item) { 
     return this.$element.val().replace(new RegExp(this.query + '$'),'') + item + ','; 
    } 
    , matcher: function (item) { 
     var last = this.query.split(','); 
     this.query = $.trim(last[last.length-1]); 

     if(this.query.length) return ~item.toLowerCase().indexOf(this.query.toLowerCase()); 
    } 
    } 

); 

Answer 2

Giả sử rằng "truy vấn với phần cuối cùng" hoạt động cho bạn, bạn có thể sử dụng filter: function(response) {...} để điền và trả về một mảng dữ liệu phù hợp value và title để thực hiện những gì bạn muốn.