biggora / bootstrap-ajax-typeahead Goto Github PK

Formatting issue on documentation.
See:
https://github.com/biggora/bootstrap-ajax-typeahead#ajax-options
All fields put into one row with <td> being visible. Makes it hard to read/use.

Hi,

I try to use ajax typeahead with an ajax call.

Here's the code :
ajax: { url: "/myurl", triggerLength: 1, method: "post" }

I can catch the event on the server side (so the call is working), I return this (as a test) :
return "[{ id: 1, name: 'John'}, { id: 2, name: 'Alex'}, { id: 3, name: 'Terry'}]";

But nothing happens.

I try to use "preProcess" option, but the function is never call.

Any idea ?

Thanks

why dropdown sugestion not show ?

$("#typeahead").typeahead({
ajax: {
url: base_url+'struktur_edit/suggestion',
triggerLength: 4
},
onSelect: displayResult
});

Hi,

Can you please suggest me how do I Integrate typeahead with tags Input ?

http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Thanks,
Raja K

Hi there,

I noticed that there was already code for scrollbar handling but scrolling with the cursor keys didn't always put the highlighted item into view.

These two small modifications to next and prev should make it work:

        next: function (event) {
            var active = this.$menu.find('.active').removeClass('active'),
                next = active.next();

            if (!next.length) {
                next = $(this.$menu.find('li')[0]);
            }

            if (this.options.scrollBar) {
                var index = this.$menu.children("li").index(next);
                var top = $(next).position().top;
                var outerheight = $(next).outerHeight();
                if (top < 0 || top + outerheight > this.$menu.outerHeight()) {
                    this.$menu.scrollTop(index * outerheight);
                }
                //if (index % 8 == 0) {
                //    this.$menu.scrollTop(index * 26);
                //}
            }

            next.addClass('active');
        },
        prev: function (event) {
            var active = this.$menu.find('.active').removeClass('active'),
                prev = active.prev();

            if (!prev.length) {
                prev = this.$menu.find('li').last();
            }

            if (this.options.scrollBar) {
                var $li = this.$menu.children("li");
                //var total = $li.length - 1;
                var index = $li.index(prev);
                var top = $(prev).position().top;
                var outerheight = $(prev).outerHeight();
                if (top < 0 || top + outerheight > this.$menu.outerHeight()) {
                    this.$menu.scrollTop((index - 7) * outerheight);
                }
                //if ((total - index) % 8 == 0) {
                //    this.$menu.scrollTop((index - 7) * 26);
                //}
            }

            prev.addClass('active');
        },

Another thing you might need to address here more dynamically is the max-height of the menu. Currently this is set at init time to a fixed value so I had to change mine to 266px to display exactly eight items of 32px height plus 10px padding.

Hope this helps,

Istvan

I use twitter boostrap 3, jquery 2.1-4

$("#model").typeahead({
source:[{modelId:1,model:"Echo"},{modelId:2,model:"Corolla"}],
displayField: 'model',
valueField: 'modelId'
});

i get strange result, i need to type many letter to start to get a result

Is there anyway of getting the input element used on the search?

` $('#txtSearchText').typeahead({

        ajax: {
            url: "/Home/GetSuggestTextByQuery",
            timeout: 500,
            hint: true,
            displayField: "title",
            triggerLength: 1,
            method: "get",
            loadingClass: "loading-circle",
            preDispatch: function (query) {
                //showLoadingMask(true);
                var selectval = $("#ddlSearchModelType").val();
                var brands = $('#ddlSearchModelType option:selected');
                if (brands.length != 1) {
                    selectval = "";
                }
                query = selectval + "!!--!!" + query;
                return {
                    query: query
                }
            },
            preProcess: function (data) {
                ///showLoadingMask(false);
                if (data.success === false) {
                    // Hide the list, there was some error
                    return false;
                }
                // We good!
                return data;
            }
        },
        scrollBar: true

    });

`

Currently the width of the menu/dropdown is fix. Would be great if this could be set on show to the same width as the input field to make it more like the native OS typeahead.

It is just 1 line of code :)

show: function() {
            var pos = $.extend({}, this.$element.position(), {
                height: this.$element[0].offsetHeight
            });

            this.$menu.css({
                top: pos.top + pos.height,
                left: pos.left,
                width: this.$element.outerWidth()
            });

            this.$menu.show();
            this.shown = true;
            return this;
        },

gr. Frans

ps. Great js library btw!

Hi,
I try to use bootstrap-Ajax-typeahead with number. Ajax call is working fine, I can see the result in "preProcess" event, but don't show the dropdown menu.

I have two inputs, both are initialized with typeahead(). When first input is filled-i.e: an ajax called is fired to alter the remote data file. Now I am trying to destroy typeahead for second input and re-initialize it. But this always fetches old data(probably cached).

How do I avoid cached data for a remote json file. ?

I try to override lookup function but it does not work.

I suggest change
this.lookup()
to
that.lookup()

on line 428

Sometimes it is necessary to change the style under different results, just like success and error

So, I added in:

to:

data = that.ajax.preProcess(data, this.$element);

other:

var params = this.ajax.preDispatch ? this.ajax.preDispatch(query, this.$element) : {
                    query: query
                };

if (this.options.onSelect) {
      this.options.onSelect({
           value: value,
           text: text
       }, this.$element);
}

Now, I can change icon after loading

preProcess(data, elem){
    if(data.success){
        return data;
    }else{
        $(elem).addClass('valid-error');
    }
}

A little suggestion,
Thanks

There is no possibility to clear the input after select is done. Because in select function after onSelect event is run other code set input value to selected. Correct way should be that onSelect event should be called the last.

Would be nice to have a way to display "No items found".

Using the AJAX approach for Typeahead and suggestions. I have 2 major problems :

1. What is the response that is expected from the server URL ? I have tried following options as responses, but they do not show up :
   ["Alabama is my home town"]
   OR
   [{"id": "2", "name": "Alabama is my home town"}]

2. When user types suggestions, the suggestions show up below. They do not change their direction if the screen size is not sufficient. Hence my suggestions never show up, but they do get listed in DOM.

Hi Aleksej,

I have have successfully integrated your typeahead ajax plugin in my website and it's working like a charm. In the section under Bootstrap integration you mention that typeahead-bootstrap.css is required to apply the Bootstrap theme to the dropdown. I can't find any reference to this css file. Is it still required? and if so, can you point me to it's location?

I also have a question regarding the return data. If I have other fields apart from the value and display fields, how can I access those when an item is selected? Should I combine them into a single value field in the preProcess function? Or is there another way?

Regards

Ron Marinusse

I trying to make an autocomplete with bootstrap typeahead using the framework spring, but it not working. the idea is that when typing a code it show all datas from the database and when I select one, this complete me the code and the name.

This is my HTML code
@

<div class="form-group">
<div class="col-sm-11">
<label for="cuenta_codigo" class="col-sm-2 control-label">Cuenta Contable:</label>
<div class="col-sm-3">
   <form:input id="cuenta_codigo" path="cuenta.ccuenta_cod" cssClass="form-control" placeholder="Código" autocomplete="off" data-provide="typeahead"/>
</div>
<div class="col-sm-6">
   <form:input id="cuenta_nombre" path="cuenta.vcuenta_nombre" cssClass="form-control" placeholder="Nombre" />
</div>
</div>

This is my Controller

@

@RequestMapping(value = "/master/cuenta/ajax", produces = MediaType.APPLICATION_JSON_VALUE)
public List<AutoType> getAjax(@RequestParam("type") String type, @RequestParam("param") String param){

List<AutoType> lista = new ArrayList<>();

try {
lista = cuentaService.getCuentaAjaxByCode(param);
} catch (Exception e) {
logger.error(e);
}

return lista;
}

This is my JavaScript code

@

<script>
$(document).ready(function () {
$('#cuenta_codigo').typeahead({
source: function (request, response) {
    $.ajax({
        url: "/master/cuenta/ajax",
        type: "POST",
        data: {
            param: request.param
        },
        dataType: "json",
        success: function (data) {
            response(data);
        }
    });
}
});
});
</script>}

If it necessary these are my Dao implement and Service Implement

Dao Implement

@

@Override
public List<Cuenta> getCuentaAjax(String code) {
String namedQuery = "Cuenta.getAjaxByCode";
List<FilterHQL> filters = new ArrayList<>();
filters.add(new FilterHQL("ccuenta_cod", code+"%"));
return hibernateUtil.fetchListByParamHQL(filters, Cuenta.class, namedQuery);
}

Service Implement

@

@Override
public List<AutoType> getCuentaAjaxByCode(String code) {
List<AutoType> json = new ArrayList<>();
List<Cuenta> lista = cuentaDao.getCuentaAjax(code);
for (Cuenta cuenta : lista) {
    json.add(new AutoType(cuenta.getCcuenta_cod(), cuenta.getVcuenta_nombre()));
}
return json;
} 

How can I destroy it?
I couldn't find this method in plugin's code, for now I'm using removeData().

Hi,
I am using this for ajax based dropdown, so as we have in select box i want both name and value of it,so when submit my form i should get value of selected name.
Kindly help,its urgent.

I've been bashing my head on the keyboard for a day or so now. I have two .typeaheads on the same page. One works, the other doesn't. I don't get any dropdown with the returned options at all on this one.

    $('#used_by_name.typeahead').typeahead({
      onSelect: function(item) {
        $('#h_used_by').val("urn:sys:0:" + item.text + ":" + item.value);
        $('#h_used_by_name').val(item.text);
      },
      ajax: {
        method: 'POST',
        url: '/data/getcoworkerslist',
        triggerLength: 4,
        preDispatch: function(query) {
          return {
            query: query,
            _token: $('input[name="_token"]').val()
          };
        },
        preProcess: function(data) {
          var i, item, len, list;
          list = [];
          for (i = 0, len = data.length; i < len; i++) {
            item = data[i];
            list.push({
              h_user_id: item.h_user_id,
              h_name: item.h_name
            });
          }
          console.log(list);
          return list;
        },
        valueField: 'h_user_id',
        displayField: 'h_name',
        items: 10
      }
    });

The data that it is fetching is working. I added a preProcess: just to see what came back and I see the data that should be listed, but no dropdown happens.

Data returned is:

[{
    "h_user_id": "fredb",
    "h_name": "Fred B",
    "h_first_name": "Fred",
    "h_last_name": "Bloggs",
    "h_job_title": "Service Manager",
    "h_avail_status": "0",
    "h_email": "[email protected]",
    "h_mobile": "0777 1234567",
    "h_phone": "1234",
    "h_icon_ref": "50\/0000000012",
    "h_site_id": "1",
    "h_class": "1",
    "h_site_name": "Site",
    "h_manager": "johns",
    "h_department": "IT",
    "h_group_id": "GRPID"
}]

Any feedback gratefully received.

I'll explain :)

My ajax return a json object with :
[ {
name: "Erwane Breton",
email: "[email protected]",
title: "Erwane Breton ([email protected])"
} , ... ]

I want to display "title" (with displayField ajax Option) BUT, when i select, fill the input field with "name" value.

Any idea ?

How update source without ajax? just directly set new array of values?

I have a case where the data received contains text with accents. The users almost always search without accents so the result is that suggestions are not being highlighted.

Is there a way to do this? From what I saw there isn't a way to add custom behavior to the highlighting functionality.

Thanks

I'm not the great at typeahead at the best of times, but I'm not sure how I can provide it to be using an external source e.g. a php+mysql query which encodes it in jsonusing post instead of get which the default seems to only do.

My original code:

this my code

$(function() {
function displayResult(item) {
console.log("selected ")
console.log(item)
}

$('#search-tutorial').typeahead({
    ajax: {
        url: baseurl+'web/tutorial/json_search',
        method: 'post',
        triggerLength: 1
    },        
    onSelect: displayResult
});

});

Does it have support for jsonp support? I have tried to use the dataType: jsonp in the ajax call, however, its not working? Thanks!

I test both from ajax and source, both not work. I have to convert to array with 'id' and 'name', it works and does not depend on you set displayField,valueField or not.

Also does not work with array of string like: ["data1", "data2"], only valueField works.

PS: see here plz: http://jsfiddle.net/spyhunter88/V6U2r/

Hey, I have a problem about search. I'm using ajax because of that but still I need one morething like force plugin to show data from ajax. Here is an explanation

When I type: İsta
It shows expected value: İstanbul

But when I typed ista
It doesn't show anything but I could see the ajax response İstanbul

Thank you,

I've an 'onSelect' event in typeahead which perform certain functions. Now I want to select any random value from list and manually fire 'onSelect' event.

I can see 'select' event but no examples to demonstrate it.
If you could share any examples that would be great.
Thanks.

Hello,
I want to add more fields in item object of onSelect event. i had all fields in json response of server but they are not coming in item object of onSelect.

When ajax object is built need to add error function overriding for ajax call failure.
(Example: 503 Service unavailable)

this.ajax.xhr = $.ajax({
                    url: this.ajax.url,
                    data: params,
                    success: $.proxy(this.ajaxSource, this),          
                    //for example like that
                    error: this.ajax.error,         
                    type: this.ajax.method || 'get',
                    dataType: 'json'
                });

When I try to use the typeahead on a modal, the selector is show in the corner of the screen.
Image is attached.

In the preProcess block shown below, I verify that I'm getting more than 7 items returned from our server, but only 7 items get listed in the drop down.

$('.fund_typeahead').typeahead
    onSelect: (item) ->
      console.log item
    ajax:
      url: '/fund_typeahead'
      triggerLength: 3
      method: 'get'
      displayField: 'fund_name'
      valueField: 'fund_id'
      preProcess: (data) ->
        $('#ret_num').val(data.length)
        data

Am I doing something silly?
Thanks,
Joe

When i click to scroll down or up on the dropdown menu it closes the menu itself.

Follow a link with a vid: http://recordit.co/okJg9WVp9W

i want to send two values to the server , one value serves type of product and another values serves dropdown value (search value) search = 'value', through Ajax
is there any new parameter i have to add in preDispatch() function. please let me know..
exports.getProduct = function(req,res){
var queryname = req.body.params;
Product.distinct('product_name',{},function(err,data){
.......
};

Hi, excelent plugin.
I'm using jquery 3.x and bootstrap 3.3.7 and I found that when I use onSelectAjaxData event, invalid data is returned.
I try to change css selector from this...

        if (this.options.onSelectAjaxData) {
            this.options.onSelectAjaxData({
								data: this.ajax.data[ this.$menu.find(".active a").index() ]
            });
        }

... to this ...

        if (this.options.onSelectAjaxData) {
            this.options.onSelectAjaxData({
								data: this.ajax.data[ this.$menu.find("li.active").index() ]
            });
        }

... and now is working fine.
I hope this will be helpful and if not just discard it.
Thanks
Ignacio

Is there a way to build display text from multiple fields?

Hi, are there plans to update to support the Bootstrap v4 alpha?

In the option table it says the ajax option (whether object or string) is null by default. This isn't true, because in the $.fn.typeahead.defaults the ajax option is a predefined object. So unless you specifically tell your instance to have an ajax option of null, the ajax option will not be null. I came across this when the sorter method didn't seem to work. It turns out the sorting is skipped when the ajax option is set. I only used the source option, but it didn't sort until I specifically set the ajax option to null.

So either have the default value actually be null or edit the options table in the documentation to reflect the predefined ajax object.

Eventhough it is listed in events in documentation i was not able to override it.

Is posible add an animation using "ajax: {}"

Option that allows you to dictate whether or not the first suggestion is selected automatically. Turning autoselect off also means that the input won't clear if nothing is selected and enter or tab is hit.

Check here, there is such option.
https://github.com/bassjobsen/Bootstrap-3-Typeahead

how can i add an item at the last.
for example: i search clients, i input "google",
but "google" is not in the datasource. here the item will display "Result Not Found". but i want to add an item afrer "Result Not Found", it writes "+Add google", when i select this item. i will add goole backend.
here is a link pic demo: http://pan.baidu.com/s/1hqTi0bM

Hello
i am using typeahead script in my we project and it working fine but when i use the same js files in mobile then i got the error "element.typeahead is not a function ".
i have checked that all the js files are loaded properly on the browser.
i am using typeahead with angularjs.
same js files are working on web view but not working on mobile.
is there any other typeahead js library for mobile ?
Thanks in advance.

How can I use this plugin with custom templates? I have tried highlighter and render. But they did not work. Thanks in advance.

how to Clear Value input after select

when i select a value from my second typeahead, i try to find the second one, like a master detail relation.

Actually my model typeahead never do the ajax call.

     var initModelTypeahead = function(brandId) {
        $("#model").typeahead({
            ajax: {
                url: '/brands/' + brandId + '/models',
                valueField: "modelId",
                displayField: "model"
            }
        });
    };

    $("#brand").typeahead({
        onSelect: function(item) {
            debugger;
            console.log(item);
            //enable component
            $("#model").removeAttr("disabled");
            initModelTypeahead(item.value);
        },
        ajax: {
            url: '/brands',
            valueField: "brandId",
            displayField: "brand"
        }
    });

hi
my code contain several email input and i need to access element object in onSelect method is it possible in your original code or not?

        $('.email').typeahead({
            onSelect: function (item) {
                console.log(this.$element);
            },
            ajax: {
                url: "users/lists",
                displayField: "email"
            }
        });

thanks

Hi,

Typeahead works fine for me through Ajax remote call. Can you please suggest me
how do I get the "id" value for the final selected item ?

$("#element").val() return the name / text .

Raja K