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.
Related
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 want to put hidden id when get the value from autocomplete for add to database but now when i get value from autocomplete and add to database it's add value is label name not the id of the data
<input type='text' id='id' name='id' class='id_line' placeholder='Item Code'/>
This my jquery code
$("#add_line").on('click',function(){
$('.tbl_add_line').append(data);
$('.id_line').autocomplete({
source: function (request, response){
$.ajax({
url : "<?php echo site_url('warehouse/get_id');?>",
dataType: "jsonp",
data : {
q: request.term
},
success: function( data ) {
response(data);
}
});
},
});
i++;
});
And this is function to get data to show in autocomplete
function get_id(){
$result = "";
if(isset($_GET['q'])){
$code = $_GET['q'];
$this->db->like("item_code",$code)->select('*');
$this->db->order_by("item_code");
$result = $this->db->from("tbl_item_code")->get()->result();
}
$arr = array();
foreach($result as $key){
$arr[] = array(
'id' => $key->id,
'value' => $key->id,
'label' => $key->item_code."(".$key->id.")",
);
}
echo $_GET['callback']."(".json_encode($arr).")";
}
You can use _renderItem method to add custom attributes to created elements.
Try this:
$(function() {
var projects = [{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
}, {
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
}, {
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}];
$("#project").autocomplete({
minLength: 0,
source: projects,
focus: function(event, ui) {
$("#project").val(ui.item.label);
return false;
},
select: function(event, ui) {
$("#project").val(ui.item.label);
$("#project-id").val(ui.item.value);
$("#project-description").html(ui.item.desc);
return false;
}
})
.autocomplete("instance")._renderItem = function(ul, item) {
return $("<li>")
.append("<a>" + item.label + "<br>" + item.desc + "</a>")
.appendTo(ul);
};
});
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
p
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div id="project-label">
Select a project (type "j" for a start):</div>
<input id="project">
<input type="text" id="project-id" disabled>
<p id="project-description"></p>
Fiddle here
$(document).on("click","#Id",function(){
var data = [
{ value: "AL", label: "Alabama" },
{ value: "AK", label: "Alaska" },
{ value: "AZ", label: "Arizona" },
{ value: "AR", label: "Arkansas" },
{ value: "UT", label: "Utah" },
{ value: "VT", label: "Vermont" },
{ value: "VA", label: "Virginia" },
{ value: "WI", label: "Wisconsin" },
{ value: "WY", label: "Wyoming" }
];
$("#Id").autocomplete({
minLength: 0,
source: data,
select: function( event, ui )
{
alert(ui.item.label);
},
})
.data("ui-autocomplete")._renderItem = function( ul, item )
{
if (item.label != "Virginia") {
return $( "<li>" )
.append( "<a>" + item.value + "<br>" + item.label + "</a>" )
.appendTo( ul );
}
};
});
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<input type="test" id="Id">
This is my sample code if i use Virginia am getting empty line but i need the output to be blank.
can anyone solve my issue and provide me an solution
Try this:
$("#Id").data("ui-autocomplete")._renderItem = function( ul, item )
{
if(item.desc != "test"){
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
}
};
instead of uiAutocomplete use ui-autocomplete
Looking at the data on #Id. It looks like its stored under autocomplete.
so, if you have already called
$("#Id").autocomplete({
source: data,
etc : etc
});
then you can call:-
$("#Id").data('autocomplete')._renderItem = function(ul, item) {
if (item.value != "test") {
return $("<li>")
.append("<a>" + item.label + "<br>" + item.desc + "</a>")
.appendTo(ul);
}
};
or you can instantiate and set _renderItem like :-
$("#Id").autocomplete({
source: data
}).data('autocomplete')._renderItem = function(ul, item) {
if (item.value != "test") {
return $("<li>")
.append("<a>" + item.label + "<br>" + item.desc + "</a>")
.appendTo(ul);
}
};
UPDATE
It looks like different versions of jQueryUI store autocomplete under data differently, as your snippet compared to the version I used are different (autocomplete vs ui-autocomplete).
The issue with the empty line, is a border around the ul. Where the autocomplete thinks is has a value to show, but as you are saying not to render the only value in the autocomplete list then the ul still has the border. By removing the border around the ul will fix this. See the snippet below:-
var data = [{
value: "AL",
label: "Alabama"
}, {
value: "AK",
label: "Alaska"
}, {
value: "AZ",
label: "Arizona"
}, {
value: "AR",
label: "Arkansas"
}, {
value: "UT",
label: "Utah"
}, {
value: "VT",
label: "Vermont"
}, {
value: "VA",
label: "Virginia"
}, {
value: "WI",
label: "Wisconsin"
}, {
value: "WY",
label: "Wyoming"
}];
$("#Id").autocomplete({
minLength: 0,
source: data,
select: function(event, ui) {
alert(ui.item.label);
},
})
.data("ui-autocomplete")._renderItem = function(ul, item) {
if (item.label != "Virginia") {
return $("<li>")
.append("<a>" + item.value + "<br>" + item.label + "</a>")
.appendTo(ul);
}
};
.ui-autocomplete {
border: 0 !important;
}
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<input type="test" id="Id">
<form id="form1">
<input type="text" name="idEmp[]" class="idEmp">
<input type="text" name="nameEmp[]" class="nameEmp">
<input type="text" name="idEmp[]" class="idEmp">
<input type="text" name="nameEmp[]" class="nameEmp">
</form>
and the jquery here
$('.idEmp').on("focus", function(){
$(this).autocomplete({
minLength: 1,
source: "autocomplete.php",
focus: function(event, ui){
$(this).val(ui.item.id);
return false;
},
select: function(event, ui){
$(this).val(ui.item.id);
// something else here to show name in nameEmp fields
return false
}
})
.autocomplete("instance")._renderItem = function(ul, item){
return $("<li class='list-group-item list-group-item-info'>")
.append("<a><h5>Emp. ID : "+item.id+"<br><span class='badge'>"+item.name+"</span></h5></a>")
.appendTo(ul);
};
});
i want to apply jQuery autocomplete in each idEmp class then value of ID appears in idEmp[] and value name appears in nameEmp[]. is there anyone know this? thanks in advance!
Start typing jQuery and select the autocomplete option then fields would be populated with label and description, use below code as reference to your code.
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
$( ".idEmp" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( this ).val( ui.item.label );
$( this ).next( ".nameEmp" ).val( ui.item.desc );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Start typing jQuery and select the autocomplete option
<form id="form1">
<input type="text" name="idEmp[]" class="idEmp">
<input type="text" name="nameEmp[]" class="nameEmp"><br/>
<input type="text" name="idEmp[]" class="idEmp">
<input type="text" name="nameEmp[]" class="nameEmp">
</form>
This is my code:
var projects = [{label:"PH2938", value: "1", fk: "3", desc: "hello"},
{label:"JUH28", value: "2", fk: "0", desc: "world"},];
{label:"HK383", value: "3", fk: "3", desc: "!"},];
$( "#serial_no" ).autocomplete({
minLength: 0,
source: function(request, response) {
var results = $.ui.autocomplete.filter(projects, request.term);
response(results);
},
focus: function( event, ui ) {
$( "#serial_no" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#serial_no" ).val( ui.item.label );
$( "#device_id" ).val( ui.item.value );
$( "#device_model" ).text( ui.item.desc );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
So now, for example, if I type 'H' in the field, all 3 results (i.e PH2938, JUH28, HK383) will be shown. My question is: is possible to make it only show the results (i.e. PH2938, HK383) whose fk = 3. That is, can I implement my own rule in showing which results.
If I have understood correctly you need to filter the projects by some criteria. In this case by fk being equal to '3'.
As you are already using jQuery then $.grep is the good candidate for the filtering task.
$.grep(projects, function (project) {
return project.fk === '3';
});
Now we have to decide where to perform this filtering.
If you want to get rid of those projects that meet the fk criteria regardless of the term used in the autocompletion input, I would do it in the original projects array:
var projects = [{label:"PH2938", value: "1", fk: "3", desc: "hello"},
{label:"JUH28", value: "2", fk: "0", desc: "world"},];
{label:"HK383", value: "3", fk: "3", desc: "!"},];
projects = $.grep(projects, function (project) {
return project.fk === '3';
});
If what you want is something more flexible that allows you to provide a different data source depending on other criteria, not only the text matching of the label, then you can perform this filtering in the source property:
source: function(request, response) {
var results = $.ui.autocomplete.filter(projects, request.term);
// Filter the matched results by project fk 3.
results = $.grep(results, function (project) {
return project.fk === '3';
});
response(results);
},
The filtering could be performed before the matching too:
source: function(request, response) {
// Filter the matched projects by project fk 3.
var filteredProjects = $.grep(projects, function (project) {
return project.fk === '3';
});
var results = $.ui.autocomplete.filter(filteredProjects, request.term);
response(results);
},
See a demo for the latter.