We Keep Coding

hide particular value in the option tag

I have the following AJAX call and right now I have the description, name and id of the company in the dropdown menu.
I am wondering if I can hide something like data.company[i].id. This will be hidden from the UI but I still want it because when a user selects a project, I am grabbing the id in my other logic.
$.ajax({
url: 'myurl',
type: 'GET',
dataType: 'json',
success: function(data) {
$.each(data.company, function(i) {
$("#mylist").append('<option>' + data.company[i].description + ' | ' + data.company[i].name + ' | ' + data.company[i].id + '</option>');
});
},
error: function(request, error) {
$.growl.error({
title: "Error",
message: "Webservice request failed!"
});
}
});

You can set the value.
$.ajax({
url: 'myurl',
type: 'GET',
dataType: 'json',
success: function(data) {
$.each(data.company, function(i) {
var optData = data.company[i].description;
var optText = data.company[i].name;
var optValue = data.company[i].id;
$("#mylist").append(`<option data-description="${optData}" value="${optValue}">${optText}</option>`);
});
},
error: function(request, error) {
$.growl.error({
title: "Error",
message: "Webservice request failed!"
});
}
});
To get the currently selected value:
$('#mylist').val();
To get the currently selected text:
$('#mylist :selected').text();
To get the currently selected data:
$('#mylist :selected').data('description');

If you want to hide a value from the UI but retain it so you can use it in your logic, try using a data attribute on the element. This is not visible to the users, but can be read back out when the option is selected.
Here's a basic example:
let data = {
company: [{
description: 'Desc #1',
name: 'Name #1',
id: 'Id #1'
},{
description: 'Desc #2',
name: 'Name #2',
id: 'Id #2'
},{
description: 'Desc #3',
name: 'Name #3',
id: 'Id #3'
}]
}
let options = data.company.map(company => `<option data-id="${company.id}">${company.description} | ${company.name}</option>`);
$('#mylist').append(options).on('change', e => {
let id = $(e.target).find('option:selected').data('id');
console.log(e.target.value, id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mylist"></select>

Calling loop variable into autocomplate select

for (a = 1; a <= 2; a++) {
$("#inp-" + a + " .nama").autocomplete({
source: function(request, response) {
$.ajax({
url: "states_remote.php",
dataType: "json",
data: {
term: request.term
},
success: function(data) {
response($.map(data, function(item) {
return {
value: item.nama,
pangkat: item.pangkat,
jabatan: item.jabatan,
nip: item.nip
};
}));
}
});
},
minLength: 2,
select: function(event, ui) {
$("#inp-" + a + " .pangkat").val(ui.item.pangkat);
$("#inp-" + a + " .nip").val(ui.item.nip);
$("#inp-" + a + " .jabatan").val(ui.item.jabatan);
$(this).next('.nama').focus();
},
html: true,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
}
});
}
i want use loop variable a into autocomplate select function, but i cant get access to call variable in this function
select: function(event, ui) {
$("#inp-" + a + " .pangkat").val(ui.item.pangkat);
$("#inp-" + a + " .nip").val(ui.item.nip);
$("#inp-" + a + " .jabatan").val(ui.item.jabatan);
$(this).next('.nama').focus();
},
can someone help me to solved my problem? i search in other topic maybe this name is asynchronous function.

try using a closure:-
for (a = 1; a <= 2; a++) {
(function(a) {
$("#inp-" + a + " .nama").autocomplete({
source: function(request, response) {
$.ajax({
url: "states_remote.php",
dataType: "json",
data: {
term: request.term
},
success: function(data) {
response($.map(data, function(item) {
return {
value: item.nama,
pangkat: item.pangkat,
jabatan: item.jabatan,
nip: item.nip
};
}));
}
});
},
minLength: 2,
select: function(event, ui) {
$("#inp-" + a + " .pangkat").val(ui.item.pangkat);
$("#inp-" + a + " .nip").val(ui.item.nip);
$("#inp-" + a + " .jabatan").val(ui.item.jabatan);
$(this).next('.nama').focus();
},
html: true,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
}
});
})(a);
}

There is another way and i feel that would be a better one:
$(".nama").autocomplete({ // <----all the ".nama" element will be initialized
source: function(request, response) {
$.ajax({
url: "states_remote.php",
dataType: "json",
data: {
term: request.term
},
success: function(data) {
response($.map(data, function(item) {
return {
value: item.nama,
pangkat: item.pangkat,
jabatan: item.jabatan,
nip: item.nip
};
}));
}
});
},
minLength: 2,
select: function(event, ui) {
// event.target will be the ".nama" element and
// as per your code it seems that the elements are sibling
// elements of the ".nama", so use `.end()` to get back to
// $(event.target)
$(event.target).siblings(".pangkat").val(ui.item.pangkat).end()
.siblings(".nip").val(ui.item.nip).end()
.siblings(".jabatan").val(ui.item.jabatan);
$(event.target).focus();
},
html: true,
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
}
});

How to store id and tags in some variable using tag-it

I am using tag-it.
This code is working properly. but problem is I am not able to get its id.
I want to get both id and tag (want to store in some hidden field ) value in my server side code.
By using fieldName: "tagValues" it is attaching a hidden field with tag name like <input type="hidden" style="display:none;" value="school,college" name="tagValues">
How can I store ids??.
Below is my code.
$(document).ready(function() {
$("#myTags").tagit({
singleField: true,
allowSpaces: false,
minLength: 2,
removeConfirmation: true,
tagLimit: 2,
fieldName: "tagValues",
placeholderText: "Tag your page (max 2)",
tagSource: function(request, response) {
console.log(request + " " + response);
$.ajax({
url: "PageTagSuggestion",
data: {term: request.term},
dataType: "json",
success: function(data) {
response($.map(data.tagList, function(item) {
return {
label: item.tag,
value: item.tag,
value1: item.id
}
}
));
}
});
},
onTagLimitExceeded: function(event, ui) {
alert("You are exceeding tag limit");
},
});
});
<ul id="myTags" name="tag"></ul>

Jquery Ui autocomplete get city from only one country

Please visit my fiddle 1st
I am using jquery Ui auto-complete there, I want the dropdown only display(trigger) cities from a single country (like Bangladesh). How can I get that?
Here is the JavaScript approach:
$(function() {
$( ".city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
}
});
}
});
});
thanks.

You'll need to pass country code in your url. e.g. `http://ws.geonames.org/searchJSON?&country=BD'
Demo Fiddle
Updated js:
$(function() {
$( ".city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON?&country=BD",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
}
});
}
});
});

difference between json created dynamically from response and one hardcoded

I'm trying to set up a bootstrap typehead.Here is my jquery code
$(function () {
$.ajax({
type: "GET",
url: "http://example.com/search?callback=my_callback",
data: { keyword: 'r' },
jsonpCallback: "my_callback",
dataType: "jsonp",
error: function (xhr, errorType, exception) {
var errorMessage = exception || xhr.statusText;
alert("Excep:: " + exception + "Status:: " + xhr.statusText);
}
});
var sources = [
{ name: "local", type: "localStorage", key: "cities", display: "country" },
{ name: "remote", type: "remote", url: "/cities/list" },
{ name: "data", type: "data", data: [] }
];
$('input.typeahead.local.remote').typeahead({
sources: [
{ name: "local", type: "localStorage", key: "cities" }
]
});
});
function my_callback(data) {
alert(data.count);
var src2 = '[';
var i;
for (i = 0; i < data.count; i++) {
src2 = src2 + "{ id : " + (i + 1) + " , name: '" + data.response[i].name + "' },";
}
src2 = src2.substring(0, src2.length - 1);
src2 = src2 + ']';
var sampleJson = [{ id: 1, name: 'Really Awesome' }, { id: 2, name: 'RSpecge'}];
localStorage.setItem("cities", JSON.stringify(src2));
}
In my callback function when i set localStorage using the data returned from jquery ajax call it doesn't work.But when i try to set the data directly using variable sampleJson it works.
Y is it so??
Here is the json dynamically created from response from jquery ajax which looks the same as the sampleJson
[{ id: 1, name: 'Really Awesome' }, { id: 2, name: 'RSpecge'}]
And here is sampleJson
var sampleJson = [{ id: 1, name: 'Really Awesome' }, { id: 2, name: 'RSpecge'}];

Can you clarify "doesn't work"? Trying to serialize your data to a JSON string by hand is unnecessary and error prone. Manipulate your data as regular javascript objects then use JSON.stringify to convert it to a string when ready. It will produce actual JSON, which, for example, requires all keys to be enclosed within double quotes, whereas your code is generating javascript object literal syntax that permits most keys to be unquoted.