jQuery has an autocomplete code that works like the search box on google. However it doesn't allow for the drop down items to be clickable links. I'm not that great with jQuery. Is there any way to alter the jQuery autocomplete code to make the items links?
Also if possible i would like to alter that code again so that when the user uses the arrow keys to scroll down the dropdown, the hovered item doesnt appear in the search box
Heres the link to the jQuery code: http://jqueryui.com/demos/autocomplete/
It's right there in the docs:
http://jqueryui.com/demos/autocomplete/#event-select
You must change the select event appropriately:
$( ".selector" ).autocomplete({
select: function(event, ui) { window.location = "www.google.com"
}
});
There is a way for you to control the actual html that is displayed.
It is in fact shown on the page you linked to
http://jqueryui.com/demos/autocomplete/#custom-data
There is no reason why you should not be able to make the drop down links.
Related
I have a normal Div with title-header ['Resize and Move Me! , Combobox'] and body part as mention below in link.
When I applied move and resize functionality using javascript, ComboBox on header part is not working. It would not drop list. If I put Combobox outside of that DIVs then its working properly,But inside it would not. See example,
JSFIDDLE DEMO
I have few questions
Can anyone tell me the reason that why its not working?
What should be the solution to make it work properly.
Because, in one the mouse click events, you are trying to block the default behavior of the select box.
function onMouseDown(e) {
onDown(e);
e.preventDefault();
}
Here e.preventDefault, is blocking the select box from showing the options when you click the mouse.
Please comment/delete it out to get the normal behavior of the select box.
There is a predictive search which creates a drop down menu of items the user can select from. Behind the dropdown there is a menu button which contains a z-index of 9999. Because of this the menu button appears in front of the dropdown menu. To fix this here is my solution :
Using jQuery listeners :
Once the user clicks into the search box update the z-index of the button :
$( ".myIcon").css("z-index" , 1);
and once the user clicks off the search box using the 'blur' listener re-update the z-index :
$( ".myIcon").css("z-index" , 9999);
This works but it does not seem very clean. I do not have access to the code that is used to generate the drop down menu so cannot update the z-index of this item.
Is there another solution I am not aware of ?
Give the parent of the search the same z-index
Though it's hard to know what the html looks like since you didn't include an example. If you want it to appear on the same level then you can give it the same z-index from the gate. If the block the search part is in is after the nav, then they will naturally be on top of each other with the same z-index.
#nav,#search{position:absolute;z-index:9999}
for example, would put #search above #nav given that #search is after #nav in the html; like:
<parent><nav/><search/></parent>
If it is located before it, and possibly with a different parent, then you can use something like:
#nav{z-index:9998} #search{z-index:9999}
which would be if the html is more like:
<search/><parent><nav/></parent>
Though, if you need it to turn on/off the z-index, and it can't be fixed at all on #search, then you're already heading the right direction.
Something like this would be fairly easy:
$('#search input').on('focusin', function(){//on focus
$(this).siblings('.myIcon').css({zIndex: '9999'});
}).on('focusout', function(){//on un-focus
$(this).siblings('.myIcon').css({zIndex: '1'});
});
Though if you were able to control the css then you could just make a class for .myIcon with z-index:9999 and instead use something like this:
.on{z-index:9999}/*added css*/
$('#search input').on('focusin focusout', function(){//on focus change
$(this).siblings('.myIcon').toggleClass('on');
});
made a fiddle: http://jsfiddle.net/filever10/pxdz5/
Are you able to request that the menu icon be changed to something a bit more reasonable?
There's no need to have it that high, simply 1 value above the next element is sufficient.
I'm sorry but I can't see any other way of solving this problem than the one you have suggested.
You can use this:
$( ".myIcon").css("visibility" , "hidden");
$( ".myIcon").css("visibility" , "visible");
I am using jQuery UI 1.10.2 and I would like to manually highlight/focus an item in the list. Basically, I am trying to achieve a HTML select-like behavior:
All the results from source should always be shown
When typing in the inout field, the best match should be highlighted, the list should NOT be filtered
When the user selects an item, the suggestion list is closed. When the user focuses on the input, the suggestion list should be opened and the selected value should be highlighted.
I can successfully open the suggestion list on input focus and not filter the result list, but I am having a bit of hard time figuring out how to manually highlight/focus the selected element when autocomplete suggestion list is opened and while typing - I am able to find the matching item, but don't know how to "activate" it.
I have tried this:
open: function() {
// Find the selected menu item...
var $menuEl = ...
$(this).data("uiAutocomplete").menu.focus(new $.Event("mouseover"), $menuEl );
}
But it doesn't seem to work.
It seems that passing null instead of an event makes it work:
$(this).data("uiAutocomplete").menu.focus(null, $menuEl );
FWIW: I created the Event because an older version of jQuery UI Menu required it. It seems that the UI Menu has changed considerably since then.
I have an autocomplete search form, more or less like the one used on facebook, where I start typing and a list of names shows up.
I made links of each of these names so you can open their profile page.
I also have a function on the search form's input field 'onblur', where I hide the autocomplete div with all the names. So that when I click outside it, it doesn't stay visible. The only problem now is that when I click one of the names, the pages doesn't redirect to the profile page of the anchor tag, even though the cursor does change on hover.
Anybody any idea?
This is because your hide event removes the list before the element can actually be clicked. There are couple of solutions.
First you could use a setTimeout to hide
setTimeout( function() { /* hide list */ }, 500);
In answer to your comment, no, you can't reorder events. So you will have to find a work around. There are a number of methods, but since you are using jQuery I would do it this way.
//you probably have something like this currently
$('element').blur( function() { $('results').hide(); });
//change it to something like this
$('element').blur( function() { $('results').fadeOut(300); });
I can't seem to find any tutorial on Google regarding this, but I've seen people do it in some websites.
I'm trying to create a form where my users can drag and drop products into their shopping list but I have no idea how to get jQuery UI's draggable to set the values for that specific form field once it has been dropped.
There is a drop event that is fired when you drop something:
drop( event, ui )
Triggered when an accepted draggable is dropped on the droppable (based on the tolerance option).
So all you need to do is listen for the drop event and update something (such as an <input type="hidden">) in the form as needed. You could use a data attribute on the draggable to identify the product elements:
<div data-product="pancakes">
<!-- ... -->
</div>
and then do something like this to update your form:
$("#droppable").droppable({
drop: function(event, ui) {
// ui.draggable is the jQuery object for the thing being dragged (and
// hence the thing being dropped).
$('input').val(ui.draggable.data('product'));
}
});
Demo: http://jsfiddle.net/ambiguous/6Cy97/