typeerror typeahead.process is not a function

Question

typeerror typeahead.process is not a function

amarpreetsaini opened this issue 10 years ago · comments

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.

Bass Jobsen · Answer 1 · Sun Apr 20 2014 03:33:16 GMT+0800 (China Standard Time)

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/

Amarpreet Singh · Answer 2 · Sun Apr 20 2014 05:44:50 GMT+0800 (China Standard Time)

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

Bass Jobsen · Answer 3 · Sun Apr 20 2014 15:35:48 GMT+0800 (China Standard Time)

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 · Answer 4 · Mon May 26 2014 19:47:24 GMT+0800 (China Standard Time)

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

Bass Jobsen · Answer 5 · Mon May 26 2014 21:19:09 GMT+0800 (China Standard Time)

@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 · Answer 6 · Tue May 27 2014 10:43:48 GMT+0800 (China Standard Time)

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

Bass Jobsen · Answer 7 · Tue May 27 2014 18:04:25 GMT+0800 (China Standard Time)

Can you post the example code you already have?

tuarender · Answer 8 · Tue May 27 2014 18:32:29 GMT+0800 (China Standard Time)

<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.

Bass Jobsen · Answer 9 · Wed May 28 2014 02:58:40 GMT+0800 (China Standard Time)

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"]
});

Abishek Baskaran · Answer 10 · Thu May 29 2014 04:01:51 GMT+0800 (China Standard Time)

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

Bass Jobsen · Answer 11 · Thu May 29 2014 04:38:29 GMT+0800 (China Standard Time)

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.

Abishek Baskaran · Answer 12 · Thu May 29 2014 23:02:26 GMT+0800 (China Standard Time)

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

tuarender · Answer 13 · Mon Jun 02 2014 17:05:28 GMT+0800 (China Standard Time)

@bassjobsen thx you :) 👍

collabration · Answer 14 · Thu Dec 18 2014 12:01:13 GMT+0800 (China Standard Time)

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?

Nicolas Trenti · Answer 15 · Fri Jan 02 2015 20:20:10 GMT+0800 (China Standard Time)

Hi everyone,

I'm trying to use Bootstrap 3 Typeahead and Bootstrap tags input together, with an external source of data.
This code works perfect for me:

jQuery('#tag_field').tagsinput({typeahead :
{
source: ["Alabama","Alaska","Arizona","Arkansas","California"]
}
});

But when I try to use a dynamic remote URL, it doesn't work anymore. My JS code is now:

jQuery('#tag_field').tagsinput({typeahead :
{
source: function (query) {
   return jQuery.get('tagsearch.php?query=' + query);
}
}
});

My remote URL is a PHP file with a MySQL query, which returns a json encoded array, with the exact same syntax as the above source, for example the result of tagsearch.php?query=tag is:

["tag1","tag2","tag3"]

But when I use this code, here is the result:

Could anyone please help me ? I can't undestand what is wrong... Thanks !

Nicolas Trenti · Answer 16 · Fri Jan 02 2015 20:54:16 GMT+0800 (China Standard Time)

Ok, I figure it out. The return of my PHP file wasn't considered as a json. I had to add items = JSON.parse(items); in the processItems function in Bootstrap tagsinput's source function:

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

I'm far from being an expert at Javascript, so I don't really understand why, but it works perfectly now. Sorry for that...

Jared Christensen · Answer 17 · Wed Mar 11 2015 05:05:06 GMT+0800 (China Standard Time)

@nicolastrenti

This tripped me up too, you almost had it.

source: function (query, process) {
    return jQuery.get('tagsearch.php?query=' + query, function(data){
        return process(data);
    });
}

Nick B · Answer 18 · Thu Mar 26 2015 02:05:56 GMT+0800 (China Standard Time)

@jared-christensen, thanks for sharing your code. I was getting an error though saying that process was undefined. Just included process as an argument, and viola!

source: function (query, process) {
    return jQuery.get('tagsearch.php?query=' + query, function(data){
        return process(data);
    });
}

Jared Christensen · Answer 19 · Thu Mar 26 2015 03:04:02 GMT+0800 (China Standard Time)

@nicholasblexrud Thanks, I left that off by mistake. I will also fix my example, just incase someone would try to use it.

Ivan Iliev · Answer 20 · Wed Apr 15 2015 02:30:15 GMT+0800 (China Standard Time)

I use the script mentioned above but it always returns me the first suggestion from the array when I have more

night · Answer 21 · Wed Apr 29 2015 17:59:36 GMT+0800 (China Standard Time)

I want to select by clicking on the trigger event, how can I do?

P · Answer 22 · Sat Jun 13 2015 20:09:28 GMT+0800 (China Standard Time)

My working example here (with bootstrap tagsinput+bootstrap typeahead)

If the first letter appears only than you can use that line from example:
JSON.parse(result);

Good luck!

<script>
$( document ).ready(function() {                                                    
    /**
     * Typeahead
     */
    var elt = $("#'.$vinput_id.'"); //tagsinput input
    elt.tagsinput({
        typeahead: {
            afterSelect: function(val) { this.$element.val(""); },
            source: function(query) {
                var result = null;
                $.ajax({
                   url: "URL/TO/JSON/SOURCE&term="+query,
                   type: "get",
                   dataType: "html",
                   async: false,
                   success: function(data) {
                       result = data;
                   } 
                });
                console.log(result);

                return  JSON.parse(result);

           }
        }
    });
});
</script>

Paulo Sergio · Answer 23 · Wed Aug 05 2015 03:20:38 GMT+0800 (China Standard Time)

Hello,
I am using bootstrap3 tags input and typeahead.js and I'm getting some inconsistencies as shown in my following code:

// including scripts ....
/js/plugin/bootstrap-tags/bootstrap-tagsinput.js
/js/plugin/bootstrap-tags/plugin/bootstrap3-typeahead.js
// ....

// ....
$(document).ready(function(){
$('#tagsInput').tagsinput({
typeahead: {
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo', 'New York']
}
});
});

Well, it seems to work and when I type something, the suggestions appear, but when I press enter on one of them, the input creates 2 tags: one with my 'unfinished typing' and other with the suggestion chosen.

~ Sorry for my english... ~

KaraMovich · Answer 24 · Thu Oct 22 2015 17:13:01 GMT+0800 (China Standard Time)

Bootstrap-3-Typeahead don't work with bloodhound in case of remote url, I edited the line 136 :
if($.isFunction(this.source)) this.source(this.query, $.proxy(this.process, this));
to
if($.isFunction(this.source)) this.source(this.query, $.proxy(this.process, this), $.proxy(this.process, this));

suwey · Answer 25 · Wed Oct 28 2015 19:46:00 GMT+0800 (China Standard Time)

@paulossm see #145, I edit the code add option.noPut to make typeahead wont copy value when use with tagsinput.

liangquandeng · Answer 26 · Tue May 10 2016 10:09:43 GMT+0800 (China Standard Time)

How to choose first Item when user choose anything

Abdul Muis Al Amin · Answer 27 · Fri Aug 05 2016 11:27:17 GMT+0800 (China Standard Time)

Is it possible to add category? Here is the screenshot for what I meant.

Afnan A. · Answer 28 · Wed Aug 17 2016 18:39:34 GMT+0800 (China Standard Time)

Hey guys...
Can anyone tell me whats the problem in my code ?
I am using (Bootstrap3.js and bootstrap3-typeahead.js) and (bootstrap.css and typeaheadjs.css) and new version of jQuery
This is index.php file

<title>Typeahead Practise</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="bootstrap_with_bs3typeahead.js"></script>
<script>
    $(function() {
        $('#typeahead').typeahead({
            source: function(typeahead, query) {
                $.ajax({
                    url: 'source.php',
                    type: 'POST',
                    data: 'query=' + query,
                    dataType: 'JSON',
                    async: false,
                    success: function(data) {
                        typeahead.process(data);
                    }
                });
            }
        });
    });
</script>

source.php

This error is occured in Mozillah Console when i type something in search field

" Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/ jquery.min.js:4:15668
TypeError: typeahead.process is not a function "

Edvard Åkerberg · Answer 29 · Mon Feb 27 2017 22:33:36 GMT+0800 (China Standard Time)

For some reason I get this error.

Uncaught ReferenceError: Bloodhound is not defined

any clues?

mekalasuraj · Answer 30 · Wed Apr 12 2017 23:28:48 GMT+0800 (China Standard Time)

I am having trouble integrating bootstrap 3 typeahead with tags input but
with objects as tags. It works if I use only tagsinput on input field, but
if I integrate it with typeahead then it doesn't work and I don't even get
any errors

These are the modules i am using
require('bootstrap-3-typeahead/bootstrap3-typeahead.min.js');
require('bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js');
require('bootstrap-tagsinput/dist/bootstrap-tagsinput.css');

$('#text').tagsinput({
typeahead: {
source: ['Alabama','Alaska','Arizona','Arkansas','California']
}});

pannet1 · Answer 31 · Wed Aug 09 2017 16:39:42 GMT+0800 (China Standard Time)

@bassjobsen

first, please accept my congratulation for the awesome book on bootstrap.

i am trying to increase the list items of the bootstrap typeahead.

I made following attempts

changed the user javascript like so
<script type="text/javascript"> $('input.typeahead').typeahead({ source: function (query, process) { return $.get('/myphplink', { query: query }, function (data) { console.log(data); data = $.parseJSON(data); return process(data); }); }, minLength: 3, fitToElement: true, items: 15, updater: function (item) { } });
changed the source bootstrap3-typeahead defauts

Typeahead.defaults = { source: [], items: 15, };

But typeahead always returns only 10 items no matter what. Is this a bug or I am doing something wrong. Kindly help.

Marcelo Junior Bezerra · Answer 32 · Fri Jul 26 2019 06:09:22 GMT+0800 (China Standard Time)

Hello, I need the element name: 'value' to autocomplete the input text 't03_name' and the code: 'value' element to autocomplete the hidden input 't03_idMember'. how to make?

HTML
<input type="text" name="t03_nome" id="t03_nome" class="typeahead_3 form-control" autocomplete="off"/> <input type="hidden" name="t03_idMembro" id="t03_idMembro" class="typeahead_3 form-control" />
JS
$('.typeahead_3').typeahead({ source: [ {"name": "Evandro Luiz de Avila", "code": "4"}, {"name": "Abedenego Sorence Borges", "code": "5"}, {"name": "Nilza Marciano do Nascimento Borges", "code": "6"}, ], autoSelect: true, });

Afnan A. · Answer 33 · Fri Jul 26 2019 09:28:12 GMT+0800 (China Standard Time)

@mjbezer Maybe this can help u out
HTML
<input type="text" id="search" name="search">
JS
var empData = [ { "id": 1, "name": "FLETCHER" }, { "id": 2, "name": "HARDY" }, { "id": 3, "name": "EVANS" }, { "id": 4, "name": "SOFIELD" }, { "id": 5, "name": "PARKER" } ];
Use:
`
$('#search').typeahead({

name: 'employees',
limit: 10,
minLength: 1,
source: function (query, process) {
  employees = [];
  map = {};
    $.each(empData, function (i, employee) {
      map[employee.name] = employee;
      employees.push(employee.name);
    });
  process(employees);
},
afterSelect: function(name) {
  alert(name)
}

})
Please change the names by your own.

JAN · Answer 34 · Sat Apr 04 2020 03:32:11 GMT+0800 (China Standard Time)

I use
bootstrap-typeahead.js version 4.0.2
bootstrap-tagsinput.js version 0.8.0
jquery v3.4.1
bootstrap v4.4

I try 3hours, the trick is typehead source need return ajax object.
below is my work source code.
Hope this information is helpful.

$('#tagsinput').tagsinput({
    tagClass: 'badge-info',
    itemValue: 'id',
    itemText: 'name',
    freeInput: false,
    typeahead: {
        displayKey: 'name',
        afterSelect: function (item) {
            $(this.$element).val("");
        },
        source: function(query) {
            params.set("action", "upload");
            return $.ajax({
                url: "./?" + params.toString(),
                method: "POST",
                data: {query: query, page: "searchList"},
            });
        }
    }
});