The first step of my complex form is to autocomplete a field with some external data located in a json. I tried and followed multiple examples and documentation but I am unable to make it work...
For this external json:
[
{
"Nombre": "Adoración Pérez",
"DNI": "23123",
"Telefono": ""
},
{
"Nombre": "Adriana Suárez",
"DNI": "345345435",
"Telefono": ""
},
{
"Nombre": "Agueda Delmiro",
"DNI": "6u56u6tJ",
"Telefono": 12312434
},
{
"Nombre": "Aida Aguilera",
"DNI": "46456456A",
"Telefono": 13123213
},
{
"Nombre": "Aladino Valdés",
"DNI": "67867845eG",
"Telefono": ""
},
{
"Nombre": "Alberto Martinez",
"DNI": "235436456",
"Telefono": ""
}
]
This is my full JS:
$(function() {
var entries = []
$.getJSON('pacientes.json', function(json) {
for (var key in json) {
if (json.hasOwnProperty(key)) {
var item = json[key];
entries.push(item);
}
}
console.log(entries)
$("#species").autocomplete({
minLength: 0,
source: entries,
focus: function(event, ui) {
$("#species").val(ui.item.Nombre);
return false;
},
select: function(event, ui) {
$("#species").val(ui.item.Nombre);
$( "#identifiant" ).val( ui.item.DNI );
return false;
}
})
});
});
This is my full HTML:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="species">Species: </label>
<input id="species">
<label for="identifiant">Identifiant: </label>
<input id="identifiant" style="width: 6em;">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/parse_data.js"></script>
</body>
</html>
I tried several different options but cannot autocomplete data. Thank you very much!
Consider the following example.
$(function() {
// Load entries once
var entries = [];
$.getJSON('pacientes.json', function(json) {
$.each(function(key, val) {
if (json.hasOwnProperty(key)) {
entries.push(json);
}
});
// Initialize Autocomplete
$("#species").autocomplete({
minLength: 0,
source: function(req, resp) {
var myData = [];
$.each(entries, function(key, val) {
if (val.Nombre.indexOf(req.term) == 0) {
myData.push({
label: val.Nombre,
value: val.DNI,
Nombre: val.Nombre,
DNI: val.DNI,
Telefono: val.Telefono
});
}
console.log(myData);
resp(myData);
});
},
focus: function(event, ui) {
$("#species").val(ui.item.Nombre);
return false;
},
select: function(event, ui) {
$("#species").val(ui.item.Nombre);
$("#identifiant").val(ui.item.DNI);
return false;
}
});
});
});
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="species">Species: </label>
<input id="species" type="text" />
<label for="identifiant">Identifiant: </label>
<input id="identifiant" type="text" style="width: 6em;" />
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/parse_data.js"></script>
This will allow you to configure custom data and still format the Array as needed.
Reference: https://api.jqueryui.com/autocomplete/#option-source
You can also make use of $.ui.autocomplete.filter().
var myData = [];
$.each(entries, function(key, val) {
myData.push({
label: val.Nombre,
value: val.DNI,
Nombre: val.Nombre,
DNI: val.DNI,
Telefono: val.Telefono
});
console.log(myData);
resp($.ui.autocomplete.filter(myData, req.term));
});
Related
how can I use a value of an autocomplete inputfield in a second-inputfield?
I wrote this script below but I dont know how to use the variables from the first in the second-inputfield? the first-field responses:
[{"label":"TEST","value":1}]
and i need the "value" for the second field..
$(document).ready(function(){
jQuery('#first-field').autocomplete({
source:'',
minLength: 2,
delay:0,
select: function(event, ui) {
event.preventDefault();
$("first-field").val(ui.item.label);
},
focus: function(event, ui) {
event.preventDefault();
$("#first-field").val(ui.item.label);
}
});
jQuery('#second-field').autocomplete({
source:'',
minLength: 2,
delay:0,
select: function(event, ui) {
event.preventDefault();
$("second-field").val(ui.item.label);
},
focus: function(event, ui) {
event.preventDefault();
$("#second-field").val(ui.item.label);
}
});
});
Try This
<label for="FirstField">First Name</label> <input id="FirstField" />
<br />
<br />
<label for="SecondField">Second Name</label> <input id="SecondField" />
$(function() {
$('#FirstField, #SecondField').autocomplete({
source: [
"Some Name",
"Value",
"Place"
],
minLength: 0,
select: function( event, ui ) {
$('#SecondField').val(ui.item.value);
$('#FirstField').val(ui.item.value);
return false;
}
})
.focus(function()
{
var self = this;
window.setTimeout(function()
{
if (self.value.length == 0)
$(self).autocomplete('search', '');
});
})
$('#FirstField').change(function() {
$('#SecondField').val($(this).val());
});
});
I am having a kendo grid where the multiple row selection is enabled. With multiple selection functionality, when users try to copy custom text like any value from the column, it enables multiple select features thus users cannot copy custom text.
Below is the sample:
https://dojo.telerik.com/#erpuneet507/ivAfoFup
The issue is, in the above example you can select text from a single cell/ or any partial text from the cell.
If you have multiple selection enabled, then your app has to handle the copy text to clipboard. In doing so, you'll need the clipboard.js library and add a Kendo ContextMenu. Handle the copy text in the ContextMenu select event. Copy Text should pop up on right click.
Try the code below in the Telerik DOJO:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
</head>
<body>
<div id="grid"></div>
<ul id="context-menu">
<li id="copyText">Copy Text</li>
</ul>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
selectable: "multiple row",
allowCopy: true,
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
]
});
$("#context-menu").kendoContextMenu({
target: "#grid",
filter: "td",
select: function (e) {
var cell = e.target;
var row = $(cell).parent()[0];
var grid = $("#grid").data("kendoGrid");
var itemId = e.item.id;
var cellText = cell.innerText;
if (itemId === 'copyText') {
new Clipboard('#copyText', {
text: function (trigger) {
return cellText;
}
});
};
}
});
});
</script>
</body>
</html>
Here's a revised version of the above. You'll no longer need the clipboard.js. This will show/pop up the text (e.g. coffee) when you right click so that you can copy the 'ffee'.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<ul id="context-menu">
<li id="copyText">
<input id="valueText"></input>
<span id="closeValueText" class="k-icon k-i-close"></span>
</li>
</ul>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
selectable: "multiple row",
allowCopy: true,
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
]
});
var closeContextMenu = false;
var contextMenu = $("#context-menu").kendoContextMenu({
target: "#grid",
filter: "td",
close: function(e) {
if (!closeContextMenu) {
e.preventDefault();
}
},
open: function(e) {
var cell = e.target;
var row = $(cell).parent()[0];
var grid = $("#grid").data("kendoGrid");
var itemId = e.item.id;
var cellText = cell.innerText;
$(e.item).find("#valueText").val(cellText);
closeContextMenu = false;
}
}).data("kendoContextMenu");
$("#closeValueText").on("click", function(e) {
closeContextMenu = true;
contextMenu.close();
});
});
</script>
</body>
</html>
I'm trying to add the value of my autocomplete selection to a specific input field with id initialNameField.
Autocomplete:
<div class="ui-widget">
<label for="tags">Search: </label>
<input class="tags" />
</div>
Input:
<input type="text" th:field="*{selectedInitialName}" class="initialNameField" id="initialNameField"
name="initialName"/>
Includes:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Autocomplete Script:
<script type="text/javascript">
//<![CDATA[
$(function() {
var availableTags = [
"1",
"2",
"3",
"4",
];
$(".tags").autocomplete({
source: availableTags,
minLength: 1,
dataType: 'json',
select: function(event, ui) {
$('#initialNameField').val(ui.item.id);
}
});
});
//]]>
</script>
What should I be doing to make this work?
You have to set the value like this:
$('#initialNameField').val(ui.item.value); // Or ui.item.label
Because ui is a object like: {"item":{"label":"1","value":"1"}}
Working fiddle here: https://jsfiddle.net/wc0rtpa9/
Try to use ui.item.label when you setting selected text to textbox.
$(document).ready(function () {
var availableTags = [
"1",
"2",
"3",
"4",
];
$(".tags").autocomplete({
source: availableTags,
minLength: 1,
dataType: 'json',
select: function(event, ui) {
$('#initialNameField').val(ui.item.label); // input the selected text
}
});
});
Here is the sample working code : http://jsfiddle.net/32Bck/625/
I am trying and experimenting to create a customized jQuery UI Autocomplete but I am failing in the first step itself. When I click on the values that populate there is no response. I am not able to select the values of autocomplete. Can anyone please let me know why?
Below is my code:
HTML:
<!DOCTYPE html>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<title>test</title>
<body>
<div>Select:</div>
<input id="project" style="width:380px;">
</body>
Javascript:
(function($){
var $project = $('#project');
var projects = [
{
value: "test1",
label: "test1",
desc: "test1",
icon: "jquery_32x32.png"
},
{
value: "test2",
label: "test2",
desc: "test2",
icon: "jqueryui_32x32.png"
}
];
$project.autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$project.val(ui.item.value);
return false;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
var inner_html = '<table><tr><td>' + item.value + '</td></tr></table>';
return $("<li></li>")
.data("item.autocomplete", item)
.append(inner_html)
.appendTo(ul);
};
})(jQuery);
You just need to replace:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
with:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
Check following fiddle:
(function($){
var $project = $('#project');
var projects = [
{
value: "test1",
label: "test1",
desc: "test1",
icon: "jquery_32x32.png"
},
{
value: "test2",
label: "test2",
desc: "test2",
icon: "jqueryui_32x32.png"
}
];
$project.autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$project.val(ui.item.value);
return false;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
var inner_html = '<table><tr><td>' + item.value + '</td></tr></table>';
return $("<li></li>")
.data("item.autocomplete", item)
.append(inner_html)
.appendTo(ul);
};
})(jQuery);
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<title>test</title>
</head>
<body>
<div>Select:</div>
<input id="project" style="width:380px;">
</body>
I have this code implemented and I like how straight forward it is because I plan to add ALOT to the Source -- however for the life of me I cannot figure out how to add the selected one as a Link.
EG > Begin Typing > Autofill works > Select > Go to that URL
Current Code:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: ["NYC", "LA", "Philly", "Chitown", "DC", "SF", "Peru"]
});
});
</script>
</head>
<body style="font-size:62.5%;">
<input id="autocomplete" />
</body>
</html>
I found a few discussions about this on here, but none of the code suggestions had worked. How do I add a URL associated with the values above; I'd love if I could keep the same syntax and near the values just add; EG: "peru" www.peru.com
You could add a url property to each object in the source array and then set window.location to that URL when the user selects an item:
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: [
{ value: "NYC", url: 'http://www.nyc.com' },
{ value: "LA", url: 'http://www.la.com' },
{ value: "Philly", url: 'http://www.philly.com' },
{ value: "Chitown", url: 'http://www.chitown.com' },
{ value: "DC", url: 'http://www.washingtondc.com' },
{ value: "SF", url: 'http://www.sanfran.com' },
{ value: "Peru", url: 'http://www.peru.com' }
],
select: function (event, ui) {
window.location = ui.item.url;
}
});
});