Bootstrap 3 typeahead.js - zapytanie według części typeahead val

Question

Próbuję połączyć się z moim adresem URL z ostatnią częścią wartości wejściowej. chciałbym zrobić coś takiego:

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

i kiedy wybrany rozwijana pozycja,

dodać nową wartość do końca linii

jakiś pomysł jak to zrobić?

Answer 1

Do Bootstrap 3 można użyć Bootstrap-3-Typeahead.

Będziesz musiał zastąpić funkcje updater i matcher. Dla funkcji matcher można użyć kodu z funkcją wymiany następująco:

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

Użyj następującego kodu dla update:

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

(mecz ostatniej wystąpieniu z: JavaScript: replace last occurrence of text in a string)

Pełny przykład:

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

Zakładając, że „kwerenda z ostatniej części” działa dla Ciebie, można użyć filter: function(response) {...} aby wypełnić i odesłać tablicę punktów odniesienia, które mają odpowiednią value i title robić, co chcesz.