Javascript If statement not working in autocomplete - javascript

I have the following Javascript code that works perfectly as far as the autocompleting as well as filling 5 additional input fields, based on the loaded array from MySQL in the type_code.php file.
The sixth element of the array val(names[6]) is filled with a database value of either Yes or No and I am trying to use this value to control whether an additional form field becomes readonly or readwrite at the front end.
It seems as if my if statement is badly formatted, as if I run the two lines of codes without the if everything works as expected.
// Autocomplete Invoice To from Code and sets ReadOnly/ReadWrite based on Editable field in Code record
$('#add_at_inv2_code1').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'type_code.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'code_table',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
$('#desc_at_inv2_code1').val(names[1]);
$('#add_at_inv2_code2').val(names[2]);
$('#add_at_inv2_client').val(names[3]);
$('#add_at_salesrep').val(names[4]);
$('#add_at_category').val(names[5]);
// Code that is not working
if($(val(names[6])) == "Yes") {
$('#add_at_inv2_client').prop('readonly',false);
$('#add_at_inv2_client').prop('disabled',false);
} else {
$('#add_at_inv2_client').prop('readonly',true);
$('#add_at_inv2_client').prop('disabled',true);
}
}
});
Can someone please help me structure this if statement correctly?
Thanks,
Adri

The val() method returns or sets the value attribute of the selected elements.
Note: The val() method is mostly used with HTML form elements.
Use
if(names[6] == "Yes")
instead of
if($(val(names[6])) == "Yes")
=========================================================================
<script type="text/javascript">
// Autocomplete Invoice To from Code and sets ReadOnly/ReadWrite based on Editable field in Code record
$('#add_at_inv2_code1').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'type_code.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'code_table',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
$('#desc_at_inv2_code1').val(names[1]);
$('#add_at_inv2_code2').val(names[2]);
$('#add_at_inv2_client').val(names[3]);
$('#add_at_salesrep').val(names[4]);
$('#add_at_category').val(names[5]);
// Code that is not working
if(names[6] == "Yes") {
$('#add_at_inv2_client').prop('readonly',false);
$('#add_at_inv2_client').prop('disabled',false);
} else {
$('#add_at_inv2_client').prop('readonly',true);
$('#add_at_inv2_client').prop('disabled',true);
}
}
});
</script>

Need following change in your code
// Code that is not working
if(names[6] == "Yes") //Change this if($(val(names[6])) == "Yes")
{
$('#add_at_inv2_client').prop('readonly',false);
$('#add_at_inv2_client').prop('disabled',false);
}
else
{
$('#add_at_inv2_client').prop('readonly',true);
$('#add_at_inv2_client').prop('disabled',true);
}

Related

JQuery Autocomplete - onscreen keyboard on mobile device

i am building a simple autocomplete lookup, webpage i have got this working on a desktop/laptop, but when i try it on a mobile/tablet im having an issue when the user types in a search query the result list beneath the search bar is covered by the onscreen keyboard.
Is there away to dismiss the keyboard when the result is displayed or will i have to move the search bar to the top of the screen and limit the results displayed so they are not covered by the onscreen keyboard, here is what i am using at the moment for my autocomplete text field.
$('#autoComp').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
type: 'POST',
dataType: "json",
data:{
query: request.term
},
success: function( data ) {
if(data.length == 0){
data.push({
label: "Name not Found",
value: 0
});
response(data);
}else{
response(
$.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0] + " - " + code[1],
value: code[0],
data : item
}
})
);
}
}
});
},
autoFocus: true,
minLength: 4,
select: function( event, ui ) {
if(ui.item.value == "Name not Found"){
hideAutoComplete();
$('#name').val($('#autoComp').val());
setTimeout(function(){
selectParty();
}, 800);
}else{
hideAutoComplete();
setTimeout(function(){
selectParty();
}, 800);
var names = ui.item.data.split("|");
$('#name').val(names[0]);
$('#village').val(names[1]);
}
}
});
Thanks

Display the name but submit the ID with jQuery tag-it

Thanks for your time reading and helping!
I'm using the jQuery "tag-it" plugin: https://github.com/aehlke/tag-it
I've already checked the current questions and answers on the site, but they didn't help to achieve the 100% of what I need. I need help with the last step.
What I'm trying to do is, when the user is writing an email address, the system suggests what users belong to that address.
The suggestions are generated in a PHP page and I take them using AJAX from the plugin. The format given is this:
[
{"value": "13", "label": "Mauricio"},
{"value": "4", "label": "Manolo"}
]
"value" is the ID of the user and "label", the name of the person.
In the example, "Manalo" and "Mauricio" are displayed as suggestions to select. But when they are selected, what is displayed is the ID of the user (the "value"), not the name (the "label").
What I want to do is to display the name of the selected users but when I send the form, only the IDs are sent.
This is the current code. Thanks a lot for the help again.
$(".users").tagit({
autocomplete: {
source: function(request, response) {
$.ajax({
type: "GET",
url: 'test_json.php?text=' + request.term,
dataType: "json",
success: function(data) {
response( $.map( data, function( item ) {
return {
label: item.label,
value: item.value
}
}));
}
});
},
},
});
Get the selected option value from the jquery Autocomplete
$(".users").tagit({
autocomplete: {
source: function(request, response) {
$.ajax({
type: "GET",
url: 'test_json.php?text=' + request.term,
dataType: "json",
success: function(data) {
response( $.map( data, function( item ) {
return {
label: item.label,
value: item.value
}
}));
},
select: function(event, ui) {
//For better understanding kindly alert the below commented code
var selectedObj = ui.item;
alert(selectedObj.value);
}
});
},
},
});

Cant push autocomplete selected value to global array in JavaScript

Im working on a project in which I have autocomplete with users list.
when I try to push autocomplete selected value to global array I get an empty list when I do console.info(usernames) outside autocomplete function.
var usernames=[];
$(document).ready(function(){
$(function(){
$( "#users" ).autocomplete({
source: function( request, response ) {
$.ajax({
type: "GET",
url: "getUserFromDb.php",
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
});
},
minLength: 2,
select: function(event,ui){
usernames.push(ui.item.value);
}
});
console.info(usernames);
});
});
soruce of autocomplete is returning correct list and select works as well, because if I do console.info(usernames) inside autocomplete select: the list will update when im selecting different values.
Since you needed an "answer", here we go. First off, your console.info has run as soon as the DOM is ready and obviously empty as the user names are pushed in later on, when you select options from autocomplete. Secondly, you are not re-logging usernames as and when it's populated. So, you have 2 options.
1) log usernames within the select function, such as:
select: function(event,ui) {
usernames.push(ui.item.value);
console.info(usernames);
}
2) Have a function that would do the job for you, such as:
select: function(event,ui) {
usernames.push(ui.item.value);
showMeUserNames();
}
function showMeUserNames() {
console.info(usernames);
}
So, your code may become:
var usernames=[];
$(function(){
$( "#users" ).autocomplete({
source: function( request, response ) {
$.ajax({
type: "GET",
url: "getUserFromDb.php",
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
});
},
minLength: 2,
select: function(event,ui) {
usernames.push(ui.item.value);
console.info(usernames);
// OR
// showMeUserNames();
}
});
});
function showMeUserNames() {
console.info(usernames);
}

Autocomplete search bar using json ajax javascript jquery and java (no PHP)

I am trying to implement the autocomplete search bar similar to facebook (like the drop down results when clicked on a particular result, it should direct to the respective link).
I have got the autocomplete thing working (search results displaying only text) but I am not sure how to link the respective links/urls to the results.
Any help is much appreciated. Thank you.
Below is my searchjson method for java which I have linked to routes as 'GET' method.
public static Result searchJSON(String query) {
List<Account> userAccs = searchAccounts(query);
ObjectNode json = Json.newObject();
ArrayNode jsonArray = json.putArray("");
ObjectNode node = null;
for(Account acc : userAccs) {
node = jsonArray.addObject();
node.put("label", acc.getDisplayName());
node.put("id", acc.getId());
}
return ok(jsonArray);
Below is my javascript for autocomplete
var SearchBar = (function($) {
var search_data = function( request, response ) {
$.ajax({
url: "/search.json",
dataType: "json",
type: "GET",
data: {q: request.term },
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item.label,
id: item.id
};
}));
}
});
};
$("#searchfield").autocomplete({
source: search_data,
minLength: 1
});
return {
attach: attach_to_bar
};
}) (jQuery);
On your autocomplete constructor you can use the option
select: function( event, ui ) {}
that gets fired when you select an item. So you can then do whatever you like.
So you talk about redirecting, in that case you can redirect to that page with window.location

How to get the unique value in autocomplete in php from mysqldatabase

How to get the unique value in autocomplete in php from mysqldatabase. and how do i get all values just like i have 3 values in autocomplete which same so i want only one in autocomplete but want to fetch the data of all. how do i do this ?
just like in picture i want 1 one php only but want the data from all the three values.
i am trying some thing like this
var citycode;
$('#countryname_1').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'country_table',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
var len=code.length;
var co= code[0];
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|").length;
var dat = ui.item.data.split("|");
citycode=dat[0] ;
alert(citycode);
}
});

Categories