typeerror typeahead.process is not a function

[amarpreetsaini]

typeahead: {
I am using this typehead with bootstrap tagsinput. I am getting " typeerror typeahead.process is not a function " error when i query .
$('#mystuff_tag_box').tagsinput({
typeahead: {
source: function (query, process) {
return $.getJSON(
'{% url "autocomplete_tag" %}',
{ term: query },
function (data) {
return process(data);
});
},
})

If i try only typeahead then it works fine. But does not work with bootstrap tagsinput.

[bassjobsen]

Try typeahead.updater instead of process.

Note i tried some basic example which seems to work as expected, see the following code:

$('.typeahead').tagsinput({typeahead :
{
items: 4,
source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
}});

See also: http://timschlechter.github.io/bootstrap-tagsinput/examples/

[amarpreetsaini]

I removed the reponse. Works fine now. I guess i didnot need it in first place. Thanx for your help.

[bassjobsen]

The code shown below uses the typeahead option of bootstrap tagsinput:

$('.typeahead').tagsinput({typeahead :
{
source: ["Alabama","Alaska"]
}});

Bootstrap tagsinput use the source parameter only. When using this typeahead option bootstrap tagsinput initiates a new typeahead class: self.$input.typeahead. Bootstrap tagsinput's typeahead classes overwrite the original source function and has a call to process already as shown below:

    self.$input.typeahead({
      source: function (query, process) {
        function processItems(items) {
          var texts = [];

          for (var i = 0; i < items.length; i++) {
            var text = self.options.itemText(items[i]);
            map[text] = items[i];
            texts.push(text);
          }
          process(texts);
        }

        this.map = {};
        var map = this.map,
            data = typeahead.source(query);

        if ($.isFunction(data.success)) {
          // support for Angular promises
          data.success(processItems);
        } else {
          // support for functions and jquery promises
          $.when(data)
           .then(processItems);
        }
      }

Notice Bootstrap tagsinput's examples also show an example such as: $('input').tagsinput().typehead({}). Bugs for these calls are already reported: mdbootstrap/bootstrap-templates#42 and mdbootstrap/bootstrap-templates#44

[tuarender]

Im a new for bootstrap3 and thypeahead.Did u have any example about event like onSelected or onFocus?
Thank you ;)

[bassjobsen]

@taudender also check the original Programmatic APIhttp://getbootstrap.com/2.3.2/javascript.html#overview. How to questions can also ask on stackoverflow:
http://stackoverflow.com/questions/17278709/set-selected-value-of-typeahead
http://stackoverflow.com/questions/12827483/bootstrap-show-all-typeahead-items-on-focus/13943606

and so on...

[tuarender]

I tried all yours link before, but it seem doesn't work.

[bassjobsen]

Can you post the example code you already have?

[tuarender]

---

<input type="text" name="school" id="school" name="school" class="form-control typeahead" placeholder="<fmt:message key='EDU_SCHOOL'/>"/>

$('#school').typeahead({
        minLength:3,
        source: function (query, process) {
            var attachParam = "?service=school&idCountry="+$('#country').val();
            if($('#country').val() == 231 ||$('#country').val() == 110 ||$('#country').val() == 213 ||$('#country').val() == 81){
                attachParam+= "&idState="+$('#state').val();
            }
            else{
                attachParam+= "&idState=0";
            }
            return $.get('/SchoolServ'+attachParam, { query: query }, function (data) {
                objects = [];
                map = {};
                $.each(jQuery.parseJSON(data), function(i, object) {
                    map[object.label] = object;
                    objects.push(object.label);
                });
                return process(objects);
            });
        },
        updater: function(item) {
            $('#idSchool').val(map[item].id);
            $("#school").prop('maxLength', item.length);
            return item;
        }
});

---

i want to use event like focus,open,close.
then i tried follow this document
https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md
http://ericsaupe.com/using-twitter-typeahead-js-custom-event-triggers/

but looklike nothing happen.

[bassjobsen]

Hi @tuarender,

Thanks for posting your code. You also referrer to twitter/typeahead.js. Please notice the repository contains the typeahead plugin which original was built-in in TB2. TB3 drops support for this plugin in favor for twitter/typeahead.js. You can not use the documentation of twitter/typeahead.js for the plugin in this repository.

Also notice the plugin don't have any open / close event. The plugin implements a select and focus function (event). You can set the select function as an option (the focus not), but you have to realize that this removes the original focus event:

$('.typeahead').typeahead(
{
items: 4,
source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"],
select: function(){var val = this.$menu.find('.active').data('value'); console.log(val);}
});

Alternatively you can extend either the select and focus function to keep it's original functionality by using the following code:

/* make a "copy" of the original function */
var tmp = $.fn.typeahead.Constructor.prototype.select;
/* overwrite the select function */
$.fn.typeahead.Constructor.prototype.select = function () {
var val = this.$menu.find('.active').data('value'); console.log(val);
/* call the orginal function */
tmp.call(this);
}
$('.typeahead').typeahead(
{
items: 4,
source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
});

[cyberabis]

Hi Bass,
First thanks for this plugin! I am also using this integrated with bootstrap tagsinput. As you had mentioned in this chain, tagsinput only allows to pass the "source" option. But I also need to change the "items" and "sorter" options. Any pointers how I could do this?

Thanks,
Abishek

[bassjobsen]

Sorry, i did not found an other solution. This kind of problems seems related to mdbootstrap/bootstrap-templates#44 in the first place.

You can write a "proxy" for your source which does the sorting and item manipluations. If your source is source.xml, than try proxy.php:

$data = file_gets_contents(source.xml); $data = sort($data); echo json_encode( data );

now call proxy.php as your source.

[cyberabis]

Ok, for now I changed the tagsinput javascript source code - that's an easy but hack way though!

[tuarender]

@bassjobsen thx you :) 👍

[collabration]

Hello,

Can somebody explain how to attach dynamic remote URL with json which will be rendering new results based on inputed query?

Right now I have:

$.get('my_url?query=abcd', function(data){
$("#some_input").typeahead({ source:data });
},'json');

works fine but the query paramter is static right now. How to make it dynamic based on user query?