typeerror typeahead.process is not a function
amarpreetsaini opened this issue · 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.
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/
I removed the reponse. Works fine now. I guess i didnot need it in first place. Thanx for your help.
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
Im a new for bootstrap3 and thypeahead.Did u have any example about event like onSelected or onFocus?
Thank you ;)
@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...
I tried all yours link before, but it seem doesn't work.
Can you post the example code you already have?
<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.
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"]
});
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
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.
Ok, for now I changed the tagsinput javascript source code - that's an easy but hack way though!
@bassjobsen thx you :) 👍
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?
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 !
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...
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);
});
}
@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);
});
}
@nicholasblexrud Thanks, I left that off by mistake. I will also fix my example, just incase someone would try to use it.
I use the script mentioned above but it always returns me the first suggestion from the array when I have more
I want to select by clicking on the trigger event, how can I do?
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>
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... ~
Bootstrap-3-Typeahead don't work with bloodhound in case of remote url, I edited the line 136 :
if(
to
if(
How to choose first Item when user choose anything
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
<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 "
For some reason I get this error.
Uncaught ReferenceError: Bloodhound is not defined
any clues?
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']
}});
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.
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, });
@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.
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"},
});
}
}
});