$( function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#searchcomplete" ).autocomplete({
source: "<?php echo base_url('home/search');?>",
minLength: 2,
select: function( event, ui ) {
log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
});
} );
I don't know how to set a url against the user's selected id in this widget. What i want here is when user select any option from dropdown and click on it then page will be redirected to url against that selected id.
I solved it using form.
<form id="tpsearch" action="" method="post">
<input type="text" id="searchcomplete">
<button type="submit" class="icon-search"></button>
</form>
and select function will be from autocomplete:
select: function( event, ui ) {
log( "Selected: " + ui.item.value + " aka " + ui.item.id );
$("#tpsearch").attr("action", "<?php echo base_url(); ?>/controller/action/" + ui.item.id);
}
Related
This is my code which render json in format {"11":"xyz","14":"abc"}
def index
if params[:term] != nil
#products = Hash[current_user.search(params[:term]).map{|product| [product.id,product.name]}]
render json: #products.to_json
end
end
This is the javascript where I am updating div #results with autocomplete result. What I want is to make xyz and abc link with the ids associated with it but I am not able to figure out why I am losing ids all I am getting in results as xyz and abc`.
$(document).ready(function(){
$("#search").autocomplete({
//source: $('#search').data('autocomplete-source'),
source: "entities#index",
open: function(e, ui) {
var list = '';
var results = $('ul.ui-autocomplete.ui-widget-content a');
var ent_id = results.html()
results.each(function() {
list += '<a href= '+$(this).html()+'/'+ent_id+ '>' +$(this).html()+'</a>'+ '<br />';
});
$('#results').html(list);
}
})
} )
Right now above javascript code is not working as required because i am not able to get ids.
Thanks
I found a soulution for it.
$(document).ready(function(){
$( "#search" ).autocomplete(
{
source:"entities#index",
select: function( event, ui ) {
$( "#search" ).val( ui.item[1] );
$( "#results").empty();
$( "#results" ).append( '<a href= '+"entities"+'/'+ui.item[0]+ '>' +ui.item[1]+'</a>' );
return false;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item[1] + "</a>" )
.appendTo( ul );
};
} )
edit A: this is NOT a jquery question, but rather a jquery Mobile question.
edit B: I changed the title ... originally I asked how to fire 'click' event specifically, but apparently the 'click' event is not the proper event to use if you want to re-create a jqm:Select Menu choice.
how to programatically fire an event on a jquery mobile select menu?
<select id = 'my_select'
name = 'my_select'
onchange = 'gf_handle_change( this.value );' >
<option id = 'option_A' value = 'A'> A </option>
<option id = 'option_B' value = 'B'> B </option>
</select>
<script>
function gf_fire_event( args_val )
{ alert( 'test : ' + jQuery( '#option_' + args_val ) ) ;
jQuery( '#option_' + args_val ).trigger( 'click' ) ;
}
function gf_handle_change( args_val )
{ alert( args_val ) ;
}
gf_fire_event( 'A' ) ;
</script>
This does not work.
Here's an example:
$(document).on('pagebeforeshow', '#index', function(){
$("#test-button").on( "click", function(event, ui) {
$('#my_select option#option_B').trigger('click');
});
$("#my_select option").each(function(){
$(this).on( "click", function(event, ui) {
$(this).attr('selected' , true);
$('#my_select').selectmenu('refresh');
});
});
});
Working jsFiddle example: http://jsfiddle.net/Gajotres/RZ68b/
One more thing, do not use onclick="... or onchange="... with jQuery Mobile, this could case problems with event triggering. Always bind your event programatically.
That will do it
function gf_fire_event( args_val )
{
//Select an option
$('#my_select option[value=' + args_val +']').attr("selected", "selected");
//Refresh jQM select menu
$('#my_select').selectmenu('refresh');
//Trigger change event
$('#my_select').trigger('change');
}
See working jsFiddle
I am using this snippet of code for my jQueryUI Autocomplete function on my site,
$( "#find" ).autocomplete({
minLength: 1,
source: function(request, response) {
var results = $.ui.autocomplete.filter(locations, request.term);
response(results.slice(0, 10));
},
focus: function( event, ui ) {
$( "#find" ).val( ui.item.value );
return false;
},
appendTo: "#results",
open: function(){
var position = $("#results").position(),
left = position.left, top = position.top;
$("#results > ul").css({left: (left + 15) + "px",
top: (top + 30) + "px", width: (206) + "px" });
},
select: function( event, ui ) {
$( "#find" ).val( ui.item.value );
$(":header.title").html(ui.item.value);
var new_url = ui.item.href; // instead of adding 'statistics', by using location.hash, it wont be necessary unlike using pushState()
location.hash = new_url;
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br />" + item.desc + "</a>" )
.appendTo( ul );
};
Actually this works perfectly fine on Firefox and Chrome, it behaves just like what it exactly behaves on the sample given here, I just merely copied and modified it according to what I wanted. But on IE9, the item.desc which shows up on other browsers is not visible on IE9. I think the code to start with fixing is the last part, the part which appends the suggestions of the autocomplete. Can someone help me out here? Cheers!
You need to upgrade bgiframe.min.js to a later version (3.0 works fine)
https://github.com/brandonaaron/bgiframe
Create a new css class to override the existing jquery ui autocomplete "position":"absolute"
.ui-autocompelte{
"position": "absolute"
....
....
}
New CSS Class
.ui-autocomplete-ie9-fix { position: relative !important; }
and apply this css class after
$("#find").autocompelte({
........
.......
});
if (!$.browser.msie || ($.browser.msie && $.browser.version != 9)) {
$("ul.ui-autocomplete").addClass("ui-autocomplete-ie9-fix");
}
Add below tag after head tag
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I have got the autocomplete to work but with errors. How would i format the response code correctly?
Response Code:
{
label: "Label 1",
value: "27"
},
{
label: "Label 2",
value: "18"
},
{
label: "Dave",
value: "25"
},
{
label: "Jacqui Potatoes",
value: "17"
}
Javascript:
$("#account_search .ac_input").autocomplete({
minLength: 0,
source: base_url + "accounts/ac_results/account_name",
dataType: "json",
type: "POST",
}).data( "autocomplete" )._renderItem = function( ul, item ) {
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
return $( "<li></li>" );
};
I think the .data() function is the problem although it is working somehow. I would like to access both the label and value
You've got an error in the _renderItem function (you should call .data on the newly created <li></li>):
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.value + "</a>" )
.appendTo( ul );
};
I also replaced item.desc which did not exist on your JSON response with item.value.
As a sidenote, you may not need to override that function at all. You only need to use it if you want to change the way each item looks in the suggestion list.
Also, make sure to remove that extra comma in the options object. Additionally, the options dataType and type are not valid options anyway:
$("#account_search .ac_input").autocomplete({
minLength: 0,
source: base_url + "accounts/ac_results/account_name"
});
Example (local data source): http://jsfiddle.net/nG8Q4/
Anyone know why the following does not work?
$.each( data.d, function( index, item ) {
// creates the tabs with custom ids
$( "#tabs" ).tabs( "add", "page.aspx?id=" + item.id, item.name )
.find('>ul>li:last')
.attr('id', 'tab_' + item.id);
// creates the buttons
$( "#buttons" ).append( "<input type='button' id='buttona" + item.id + "' value='" + item.name + "'>" );
// link buttons with tabs
$( "#buttona" + item.id ).live('click', function() {
$( "#tabs" ).tabs( "select" , "#tab_" + item.id );
});
});
I am trying to assign id's to the tabs, then select the tabs using their id's.
The above does nothing when a button is clicked and it returns no errors at all.
It works fine when using the index as shown below, but I need to use an id for various reasons:
$.each( data.d, function( index, item ) {
// creates the tabs
$( "#tabs" ).tabs( "add", "page.aspx?id=" + item.id, item.name );
// creates the buttons
$( "#buttons" ).append( "<input type='button' id='button" + index + "' value='" + item.name + "-" + index + "'>" );
// link buttons with tabs
$( "#button" + index ).live('click', function() {
$( "#tabs" ).tabs( "select" , index );
});
});
You can use the index() method to get the index of the tab from the id of its header:
$("#button" + item.id).live("click", function() {
$("#tabs").tabs("select", $("#tab_" + item.id).index());
});
Since index() is called without arguments in the code above, it will return the index of the element relative to its siblings, i.e. the other tab headers.
you can switch the tabs with the id of the tab:
var $tabs = $("#tabs").tabs();
$("button").click(function() {
$tabs.tabs( "select", "#tabs-6" );
});
It seems to me that .index() returns an index from 1 so that if I have 3 tabs and want to select the third one, I should return :
$("#button" + item.id).live("click", function() {
$("#tabs").tabs("select", $("#tab_" + item.id).index()-1);
});