jQuery ui autocomplete - renderItem url's - javascript

Using:
.data( "autocomplete" )._renderItem = function( ul, item ) {
var temp = item.url.substring(16, item.url.length)
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.value + "<br>" + item.url + "<br>" + item.description + "<br>" + "Support URL: " + item.support_url + "<br>" + "Contact: " + "Test" + "<br />" + "</a>" )
.appendTo( ul )
jQuery is parsing the item.url and automatically making that a href in the html. I'd like to manually control what becomes an href so that I can do something like "" + item.title ""
The way jQuery handles that now is making item.url an href and adding my html href and not using the title properly.
In an older version of autocomplete I was able to do a .result(function(event, item) {
location.href = item.url;
}); but that doesn't seam to be supported here.

You can supply a callback that will be executed when an item is being selected.
$("#input").autocomplete({
source: mySource,
select: function(event, ui){
window.location = ui.item.url;
}
});
Ref: http://docs.jquery.com/UI/Autocomplete#event-select

Related

jquery autocomplete - Conditional styling of dropdown result

Depending on a specific value of a records' status ("ACTIVE" vs. "INACTIVE") I want to give each record of the dropdown result a certain background-color. How to do so? I tried the below:
json:
[{"id":"1234","label":"Player","status":"ACTIVE"},{"id":"1235","label":"Player","status":"ACTIVE"}, ...]
js:
...
autocomplete: ({
source: function( request, response ) {
...
},
create: function() {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
return $( "<li>" )
if ( item.status == 'ACTIVE' ) {
.append( "<a style='background-color: #eaffd6' href='/"+ item.id +"' >" + item.label + "</a>" )
}
if ( item.status == 'INACTIVE' ) {
.append( "<a style='background-color: #ffe5e5' href='/"+ item.id +"' >" + item.label + "</a>" )
}
//.append( "<a style='background-color: #ffe5e5' href='/"+ item.id +"' >" + item.label + "</a>" )
.appendTo( ul );
};
$(this).data('ui-autocomplete')._renderMenu = function( ul, items ) {
var that = this;
$.each( items, function( index, item ) {
that._renderItemData( ul, item );
});
};
}
})
...
Your function returns before it even reaches your if( item.status...) so this code is never evaluated. Consider building the markup as a string and then returning the string of html when you've finished.
I would add a class of active or inactive to the <li> element and then css rules .active { background-color: #eaffd6; } .inactive { background-color: #ffe5e5 }
Edit you could try something like
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
var str_html = '<li class="' + item.status.toLowerCase() + '">'
+ '<a href="/"' + item.id + '" >' + item.label + '</a>'
+ '</li>'
return str_html''
};

Ajax Posts Empty Name - Fixed

I have fallowing code parse json files from .json file and works well. when i give it name and trying to post from form data gives me empty post data.
HTML:
<div id="jewels" ></div>
JS:
<script type="text/javascript">
$.getJSON( "include/settings/guild_bank_jevels.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<option name='jewel_name' value='" + key + "'>" + val + "</option>" );
});
$( "<select/>", {
html: items.join( "" )
}).appendTo( "#jewels" );
});
</script>
Thanks in advance for help.
UPDATE Fixed
Script:
<script type="text/javascript">
$.getJSON( "include/settings/guild_bank_jevels.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<option value='" + key + "'>" + val + "</option>" );
});
$("#jewels").html(items);
});
</script>
HTML Part:
<select id="jewels" name="jewel_name">
</select>
Your select doesn't have a name or id. Inputs need to have one of these for forms to post their value.
$( "<select/>", {
id='some_id',
html: items.join( "" )
}).appendTo( "#jewels" );
You have some extra double quotes " in the following line :
items.push( "<option name="'jewel_name'" value='" + key + "'>" + val + "</option>" );
___________________________^____________^
Please try to replace it by :
items.push( "<option name='jewel_name' value='" + key + "'>" + val + key + "</option>" );
Snippet
var items = [];
var data={'first_key': 'first_val', 'second_key': 'second_val'};
$.each( data, function( key, val ) {
items.push( "<option name='jewel_name' value='" + key + "'>" + val + "</option>" );
});
$( "<select/>", {
html: items.join( "" )
}).appendTo( "#jewels" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jewels" ></div>
Hope this helps.

Append two times after each other

I've got this input search with autocomplete. It append image plus label to ul in list and that works just fine. But I also would like to append just the image to a div named wrapper. I'm a begginer in this, can you have two different append after each other?
heres my code:
<body>
<div class="wrapper"
<div id="project-label">Select:</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id" value="flower">
<p id="project-description"></p>
</wrapper>
</body>
<script>
$(function () {
var projects = [
{
value: "Flower",
label: "Flower",
desc: "Beautiful flowers",
icon: "flower.jpeg"
},
{
value: "Rose",
label: "R",
desc: "roses are red violets are blue",
icon: "rose.jpg"
},
{
value: "Tulip",
label: "tulip",
desc: "lalala",
icon: "tulip.jpg"
}
];
$( "#project" ).autocomplete({
minLength: 1,
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 );
$( "#project-icon" ).attr( "src", "img/" + ui.item.icon );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append("<a><img src='img/" + item.icon + "' />" + item.label + "</a>")
.appendTo(ul)
</script>
so what I would like is to have another append after the first one like this:
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append("<a><img src='img/" + item.icon + "' />" + item.label + "</a>")
.appendTo(ul)
.append("<a><img src='img/" + item.icon + "' />" + "</a>")
.appendTo(".wrapper")
This doesnt work obviously, but can you modify it so that it works?
I suggest this line in your _renderItem function if you would like to have two entries for one item:
return $("<li><a><img src='img/" + item.icon + "' />" + item.label + "</a></li><li><a><img src='img/" + item.icon + "' />" + "</a></li>").appendTo(ul);

How to trigger javascript generated HTML list items with return key stroke

I've just implemented a Javascript autocomplete search box inside my website, but the only way I can trigger the links to sub pages is by clicking list items with my mouse.
What I want to do, in add to the possibility to select with keyboard that's already implemented, the possibility to hit "return" key on keyboard and go to the selected landing page.
The Js I'm using is:
<script>
$(function() {
var projects = [
{
value: "value1",
label: "value1",
desc: "descr1",
icon: "icon1.png",
link: "http://url1"
},
{
value: "value2",
label: "value2",
desc: "descr2",
icon: "icon2.png",
link: "http://url2"
}
];
$( "#project" ).autocomplete({
minLength: 2,
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 );
$( "#project-icon" ).attr( "src", ui.item.icon );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a href='" + item.link + "'>" + "<img style='height:35px;' src='" + item.icon + "'/>" + " " + item.label + " - " + item.desc + "</a>" )
.appendTo( ul );
};
});
</script>
The HTML I'm using is:
<input id="project"></div>
You can see an example here: http://www.lolgame.it/lolgame-counterpicks/
Thanks a lot everyone
Heere we go. Tested here: http://jsfiddle.net/agWH2/
$( "#project" ).autocomplete({
minLength: 1,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
if (event.keyCode == 13) {
window.location.href = ui.item.link;
}
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", ui.item.icon );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a href='" + item.link + "'>" + "<img style='height:35px;' src='" + item.icon + "'/>" + " " + item.label + " - " + item.desc + "</a>" )
.appendTo( ul );
};

CSS formatting image w/ text in jquery ui autocomplete widget

I have an autocomplete widget that displays text w/ images. Currently my results look like this.
I would like to set up my results so that the words 'test' and the name 'Federico' or 'Casey' appear on different lines, right above each other.
This is the relevant part of my javascript code for the widget:
)
.data( "autocomplete" )
._renderItem = function( ul, item ) {
return jQuery( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + "<img src='" + window.module.Globals.prototype.karma_assets + "images/_pricing_tables/best_deal.png' style='vertical-align:text-top;'/>" + item.id + " - " + item.label + "</a>" )
.appendTo( ul );
};
Anyone know how to format my output to achieve this? Thanks!
Wrap the text portion of the a tag in a div element that should create the push you are looking for and allows the <br /> to work the way you want it to. CSS3 compliant but works backwards compatible.
.append( "<a>" + "<img src='" + window.module.Globals.prototype.karma_assets + "images/_pricing_tables/best_deal.png' style='vertical-align:text-top; float: left;'/><div>" + item.id + " <br /> " + item.label + "</div></a>" )
.append( "<a>" + "<img src='" + window.module.Globals.prototype.karma_assets + "images/_pricing_tables/best_deal.png' style='vertical-align:text-top; float: left;'/>" + item.id + " <br /> " + item.label + "</a>" )
try this..

Categories