Develop Reference

How to Trigger JQuery with AJAX Autocomplete

I've seen some similar posts here, but unfortunately none of them have solved my problem. My experience with JQuery is minimal, so I'm sure there's something I'm missing. If someone could help me with this, I'd really appreciate it!
I created an ASP.NET/C# page that uses a JQuery/AJAX autocomplete function to display a list of tag or lot numbers the user can select from as they type values in a textbox (txtLookup).
$(document).ready(function ()
{
$("#txtLookup").on("keyup",function () {
var textCheck = $("#txtLookup").val();
if ($("#txtLookupType").val() == "tagNo")
{
$(".autosuggest").autocomplete(
{
source: function (request, response) {
$.ajax(
{
type: "POST",
url: "Inventory.aspx/GetAutoCompleteData",
data: '{"lookup":' + textCheck + '}',
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) { response(data.d); },
});
}
, minLength: 2,
});
}
else if ($("#txtLookupType").val() == "lotNo")
{
var jsonText = JSON.stringify({ lookup: textCheck + '%' });
$(".autosuggest").autocomplete(
{
source: function (request, response) {
$.ajax(
{
type: "POST",
url: "Inventory.aspx/GetAutoCompleteData3",
data: jsonText,
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) { response(data.d); },
//error: function (ts) { alert(ts.responseText); }
});
}
, minLength: 2,
});
}
else
{
}
});
});
The function works great when a keyboard is used to enter the values, but users can also enter numbers via an on-screen number pad I created (the program runs on a touchscreen). When users click a number button, the number is written to the textbox via Javascript. I'd like to trigger the autocomplete at this time, but I can't figure out how to do it. Some of the things I've tried are commented in the code block below. I've also tried modifying the function to use $("[id$=txtLookup").keyup(function () { instead of $("#txtLookup").on("keyup",function () {. I've tried different events, like keydown, keypress, and change, but haven't had any luck. ​
This Javascript block runs when the user clicks the "1" button:
if (object.id == "imgNum1")
{
var x;
x = "1";
var textObj = document.getElementById('txtLookup');
insertTextAtCursor(textObj, x);
document.getElementById("txtLookup").focus();
document.getElementById("txtLastClickedBtnValue").value = '';
//Failed attempts...
//$("#txtLookup").trigger("keyup");
//jQuery(document).ready(function(){});
//$(".autosuggest").autocomplete("search");
//$("input#txtLookup").autocomplete("search");
//$("[id$=txtLookup]").autocomplete("search");
}
Can someone please tell me what I'm doing wrong? Thanks in advance!
Edited to add the ASP.NET code:
Textbox:
<asp:TextBox id="txtLookup" runat="server" Height="16px" Width="155px" CSSClass="labelAlignTop autosuggest" onfocus="javascript: setTextboxID(this);"></asp:TextBox>
The setTetboxID function just writes the textbox name to a hidden field to store it to track the last clicked textbox.
Number button:
<asp:ImageButton ID="imgNum1" ImageUrl="Images/InvNumPad/btn_1.png" runat="server" onmouseover="this.src='Images/InvNumPad/btn_1_Over.png'" onmouseout="this.src='Images/InvNumPad/btn_1.png'" CssClass="inv_btnNum1" onfocus="javascript: getButtonClicked(this)" onclientclick="return false;" Width="50px" Height="50px"/>
The getButtonClicked function contains the Javascript block I posted above that runs when the user clicks the "1" button and handles the caret positioning.

After much fiddly work, Divine intervention blessed me with the solution to my question. I wanted to add an update in case someone in the future is tearing their hair out looking for the answer. To trigger the autocomplete code I posted above, I needed to trigger two events: touchstart and input.
function triggerAC()
{
//Triggers txtLookup autocomplete after touchscreen event
$("#txtLookup").trigger("touchstart");
$("#txtLookup").trigger("input");
}
I also added touchstart to the third line of the code block I originally posted, changing
$("#txtLookup").on("keyup",function () {
to
$("#txtLookup").on("keyup touchstart",function () {

JQuery & Ajax disable click

I have a table with data and a function to help me get values from rows:
function getRow () {
$('#mytable').find('tr').click( function(){
let fname = $(this).find('td:eq(4)').text();
let start = $(this).find('td:eq(5)').text();
let end = $(this).find('td:eq(6)').text();
.......ajax method () etc
................
}
So far, it has been working perfectly and fetching me the correct data. I had another function elsewhere in the page, where clicking on some links would fetch some data from the server and reload the page to display the new data. Everything was working like clockwork.
Now, I decided that when re-displaying fresh data, instead of reloading the page, it's better to refresh the #mytable div. Indeed, it worked, but alas it spoiled the first function. So basically the function below has introduced a bug elsewhere in the page, and I'm not sure why or how to fix it. It's as if the div refresh has completely disabled the event handler. Any ideas?
$(document).ready(function() {
$(".key").click(function(event) {
event.preventDefault();
var word = event.target.innerHTML;
$.ajax({
url: '.../',
data: {
action : "key",
keyword: word
},
type: 'get',
success: function(data){
$('#mytable').load("/.../../..." + ' #ytable');
},
error: function(e){
console.log(e);}
});
});
});

Always show autocomplete list, even if search doesn't match

I have an autocomplete field, and on type I go to the PHP/Database to retrieve the matching options.
Thing is, my suggestion list isn't exactly matches of the text. I explain:
Say I type "Jon". My list will bring from the database "John Doe", "Jonatan", etc. Only "Jonatan" will be visible as the suggestion to the input, but I do need them all, because it considers approximation (there's a soundex element on my backend search).
My JavaScript/Ajax code:
function prePatientsList(){
//I'm limiting search so it only starts on the second character
if (document.getElementById("name").value.length >= 2) {
try
{
listExecute.abort();
}catch(err) {
null;
}
var nome= $("#name").val();
var nomeList = "";
listExecute = $.ajax({
url: '/web/aconselhamento/Atendimento/PrePacientesAutocomplete',
type: "POST",
async: true,
datatype: 'json',
data: { nome: nome}
}).done(function(data){
source = JSON.parse(data);
});
$(function() {
$("input#nome").autocomplete({
source: source,
// I know I probably don't need this, but I have a similar component which has an URL as value, so when I select an option, it redirects me, and I'll apply you kind answer on both.
select: function( event, ui ) {
ui.item.label;
}
});
});
}
}
Thanks.

I think you'd have to set your remote endpoint directly as the autocomplete's source (e.g. similar to https://jqueryui.com/autocomplete/#remote) so that it's the backend which does all the filtering. Right now, the autocomplete effectively thinks you've fed it a static list of options from which further filtering should take place, and therefore it decides to handle the filtering itself.
Your code can be as simple as this I think, no need to have a separate handler or an ajax request outside the scope of the autocomplete.
$(function() {
$("input#nome").autocomplete({
minLength: 2, //limit to only firing when 2 characters or more are typed
source: function(request, response)
{
$.ajax({
url: '/web/aconselhamento/Atendimento/PrePacientesAutocomplete',
type: "POST",
dataType: 'json',
data: { nome: request.term } //request.term represents the value typed by the user, as detected by the autocomplete plugin
}).done(function(data){
response(data); //return the data to the autocomplete as the final list of suggestions
});
},
// I know I probably don't need this, but I have a similar component which has an URL as value, so when I select an option, it redirects me, and I'll apply you kind answer on both.
select: function( event, ui ) {
ui.item.label;
}
});
});
See http://api.jqueryui.com/autocomplete/#option-source for more info.

Add extra data in textextjs plugin

I'm trying to call a funtion in textextjs method-
//my function
function GetAreaTags() {
return "some text";
}
//textext initializtion
$('#territory').textext({
plugins: 'tags prompt focus autocomplete ajax',
ajax: {
url: '/Admin/Search/GetTerritorySuggestions?area=' + GetAreaTags(),
dataType: 'json',
cacheResults: false
}
});
But GetAreaTags() is not being called. How can i make it happen?

It should work... But try this:
function GetAreaTags() {
return "some text";
};
var yourObj= {
plugins: 'tags prompt focus autocomplete ajax',
ajax : {
url: '/Admin/Search/GetTerritorySuggestions?area=' + GetAreaTags(),
dataType: 'json',
cacheResults: false
}
};
$('#territory').textext(yourObj);
console.log(yourObj.ajax.url);
If that doesn't work out try this:
function GetAreaTags() {
return "some text";
};
var yourObj= {
plugins: 'tags prompt focus autocomplete ajax',
ajax : {
url: function() {return '/Admin/Search/GetTerritorySuggestions?area=' + GetAreaTags()},
dataType: 'json',
cacheResults: false
}
};
$('#territory').textext(yourObj);
console.log(yourObj.ajax.url);
Check the console both times to see if your url is what you desire.
[EDIT: I rejected the edit by mistake, sorry about that]
Edit2
From s.k.paul's comment:
GetAreaTags() should execute every time i type in that textbox.
However, console says- 1. /Admin/Search/GetTerritorySuggestions?area=
2. localhost:12788/Admin/Dashboard/…}&q= 404 (Not Found)
Therefore you need another event handler to dynamically change the url (the plugin must be recalled with another url):
function GetAreaTags() {
return "some text";
};
$("#territory").keyup(function() {
var yourObj= {
plugins: 'tags prompt focus autocomplete ajax',
ajax : {
url: function() {return '/Admin/Search/GetTerritorySuggestions?area=' + GetAreaTags()},
dataType: 'json',
cacheResults: false
}
};
$('#territory').textext(yourObj);
console.log(yourObj.ajax.url);
});
However, this may be very heavy... The plugin expects you to have a single reference for your auto-complete resource. If you're dynamically changing it, it may reset the already existing stuff.
Edit3
Edit 2 : textextjs does not work at all now. And, url function returns
whole function text
This means the plugin doesn't handle well being recalled twice or more times in the same element. The only possible solution I am seeing is to change the plugin's code in order to dynamically change the resources according to your function...
Which makes me wonder, if it's easier for you to allow the user to have a broader data resource (include all areas) when typing, this way there would be only one URL and the plugin wouldn't have any trouble with that.

jQuery clearQueue not working properly

I have an AJAX function that displays a notification upon success. However it is possible the user calls it a few times within a short period of time thus creating a que of notifications. I am trying to eliminate the que and show the notification once
AJAX FUNCTION
function update(updateid, div) {
$.ajax({
type: "GET",
url: 'file.php',
data: {"updateid":updateid,"div":div},
success: function(data) {
$('.notification').html(data).hide().fadeIn(300);
$('.notification').delay(2000).fadeOut();
}
});
}
Ive tried adding clearQueue() a few times
This prevents the notification from working
$('.notification').html(data).hide().fadeIn(300).clearQueue();
$('.notification').delay(2000).fadeOut();
This prevents the notification from fading out
$('.notification').html(data).hide().fadeIn(300);
$('.notification').delay(2000).fadeOut().clearQueue();
Obviously im not using clearQueue(); properly, can someone point me in the right direction?

Try
$('.notification').clearQueue().delay(2000).fadeOut();
use clearQueue() before delay.
You can also use .stop()
$('.notification').stop(true,true).delay(2000).fadeOut();

Why not using a flag varible.
var notificationShowing = false;
[...]
success: function(data) {
if (!notificationShowing) {
notificationShowing = true;
$('.notification').html(data).hide().fadeIn(300);
$('.notification').delay(2000).fadeOut(function() { notificationShowing = false});
}
}