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>
Related
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));
});
I am using Bootstrap-Treeview. I need a tree with checkboxes. And i want to send all tree to the server in treview format when button is pressed. But i can't understand how to extract actual data from treeview.
<html xmlns="http://www.w3.org/1999/html">
<head>
<link href="bootstrap-treeview.min.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-treeview.min.js"></script>
<script>
window.onload = function () {
var object = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
];
$('#tree').treeview({
data: object,
showCheckbox: true,
})
.on('nodeSelected', function (event, data) {
console.log('node selected = ' + JSON.stringify(event) + '; data = ' + JSON.stringify(data));
console.log('object =' + JSON.stringify(object));
console.log('tree =' + JSON.stringify($('#tree').data('treeview')));
console.log('tree 2 =' + JSON.stringify($('#tree')));
console.log('tree 3 =' + JSON.stringify($('#tree').treeview(true)));
});
};
</script>
</head>
<body>
<div id="tree">twetwe</div>
</body>
</html>
After page loads i check any checkbox and than click on any item, so console.log is called. But there is no info about actual state of all treeview. I need that information about all nodes :
{"text":"Child 2","nodeId":3,"parentId":0,"selectable":true,"state":{"checked":false,"disabled":false,"expanded":false,"selected":true}}
Its not possible to get all the nodes of the tree as such because no public method is available on the treeview object that would give the current state of the whole tree .i.e all the nodes.
However it is possible to extract that data indirectly say by combining outputs of treeview.getCollapsed() and treeview.getExpanded() methods into a single object.
<html xmlns="http://www.w3.org/1999/html">
<head>
<link href="bootstrap-treeview.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="bootstrap-treeview.min.js"></script>
<script>
window.onload = function () {
var object = [
{text: "Parent 1",
nodes: [{text: "Child 1",
nodes: [{text: "Grandchild 1"}]
},
{text: "Child 2"}
]
},
{text: "Parent 2"} ];
$('#tree').treeview({
data: object,
showCheckbox: true,
}).on('nodeSelected', function (event, data) {
console.log( getAllNodes() );
console.log( JSON.stringify(getAllNodes() ));
console.log('node selected = ' + JSON.stringify(event) + '; data = ' + JSON.stringify(data));
});
};
function getAllNodes(){
var treeViewObject = $('#tree').data('treeview'),
allCollapsedNodes = treeViewObject.getCollapsed(),
allExpandedNodes = treeViewObject.getExpanded(),
allNodes = allCollapsedNodes.concat(allExpandedNodes);
return allNodes;
}
</script>
</head>
<body>
<div id="tree">twetwe</div>`enter code here`
</body>
</html>
However please note that the resultant object is not similar in structure to input object that was supplied to treeview as data. Resultant object may be reformatted to construct an object similar to input object.
I am using this https://github.com/Textalk/angular-schema-form plugin to generate my form will not display .I study all documentation and add all js required i didn't get any error but it not display why ?
http://plnkr.co/edit/FO5iEs6ulmP3aR0PW4nt?p=preview
<!DOCTYPE html>
<html >
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://dl.dropboxusercontent.com/s/8fq4c4t7jct4w4h/schema-form.js?m="></script>
<script src="https://dl.dropboxusercontent.com/s/unk0id7tmc9w0mm/angular-sanitize.js?m="></script>
<script src="https://dl.dropboxusercontent.com/s/icrciconaesuw29/tv4.js?m="></script>
<script src="https://dl.dropboxusercontent.com/s/rk0dfetihiqs7bi/ObjectPath.js"></script>
</head>
<body>
<div ng-controller="FormController">
<form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>
<script>
function FormController($scope) {
$scope.schema = {
type: "object",
properties: {
name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
title: {
type: "string",
enum: ['dr','jr','sir','mrs','mr','NaN','dj']
}
}
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
}
</script>
</body>
</html>
The problem was the javascript plugins included were not in a proper order.
Also use angular.module() to initialize the controller.
JS:
angular.module('test',['schemaForm']).controller('FormController', function($scope,$http){
$scope.schema = {
type: "object",
properties: {
name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
title: {
type: "string",
enum: ['dr','jr','sir','mrs','mr','NaN','dj']
}
}
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
})
Demo
I got the following code from jquery ui demo.
I did some minor modifications to that.
Here is the modified code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!--link rel="stylesheet" href="/resources/demos/style.css"-->
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<script>
$(function() {
var projects = [
{
id: "jquery",
name: "jQuery",
location: "the write less, do more, JavaScript library"
},
{
id: "jquery-ui",
name: "jQuery UI",
location: "the official user interface library for jQuery"
},
{
id: "sizzlejs",
name: "Sizzle JS",
location: "a pure-JavaScript CSS selector engine"
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.name );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.name );
$( "#project-id" ).val( ui.item.id );
$( "#project-description" ).html( ui.item.location );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.name + "<br>" + item.location + "</a>" )
.appendTo( ul );
};
});
</script>
</head>
<body>
<div id="project-label">Select a project (type "j" for a start):</div>
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>
</body>
</html>
Now jquery pops up autocomplete suggestions only when 'j' key is pressed.
for other keys it doesn't do anything.
what am I doing wrong here?
It is because of the default search mechanism, it filters the contents based on the fields label or value.
With your custom data, it is better to implement the source method yourself like,
$("#project").autocomplete({
minLength: 0,
source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
var array = $.grep(projects, function (value) {
return matcher.test(value.id) || matcher.test(value.name) || matcher.test(value.location);
});
response(array);
},
focus: function (event, ui) {
$("#project").val(ui.item.name);
return false;
},
select: function (event, ui) {
$("#project").val(ui.item.name);
$("#project-id").val(ui.item.id);
$("#project-description").html(ui.item.location);
return false;
}
})
.data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li>")
.append("<a>" + item.name + "<br>" + item.location + "</a>")
.appendTo(ul);
};
Demo: Fiddle
You must have a value attribute on your projects array:
var projects = [
{
id: "jquery",
name: "jQuery",
value:"jQuery",
location: "the write less, do more, JavaScript library"
},
...
{
id: "sizzlejs",
name: "sizzle JS",
value:"sizzle JS",
location: "a pure-JavaScript CSS selector engine"
}
];
This way the search engine is going to work.
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;
}
});
});