I have an autocomplete field into my website. I just want to display the results inside a <div> tag instead the popup window that the plugin opens natively.
I searched already for solutions for this in other posts, but what they do is to change the position of the "popup" window, and what I want is to replace the content of the <div> with the results, not to put the popup over it.
This is my code :
$('#keyword').autocomplete(
{
source : '/Dev/pages/suivi_searchCompany.php',
select: function( event, ui )
{
console.log(ui.item.value);
loadHisto(ui.item.value);
loadInfosCompanies(ui.item.value);
loadInfosContact(ui.item.value)
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item )
{
console.log('test');
console.log(item);
console.log(ul);
return $( "<li>" )
.append( "<a>" + item.name + "</a>" )
.appendTo( ul );
};
An ugly but maybe sufficient solution might be to simply copy the content of the jquery-ui-generated div to your div and hide the default div:
jQuery:
$('#ui-id-1').bind('DOMSubtreeModified', function() {
$('#mycontainer').html($('#ui-id-1').html());
});
Empty custom div if input is empty:
$('#keyword').keyup(function() {
if($(this).val() == '') {
$('#mycontainer').html('');
}
});
CSS:
#ui-id-1 {
display: none !IMPORTANT;
}
JSFiddle
The ID of the default autocomplete div (#ui-id-1) might vary.
UPDATE:
To add one of the possible options from the dropdown to your textbox, add this:
$('#mycontainer').on('click', 'li', function() {
//add option to textbox
$('#keyword').val($(this).html());
//hide / clear dropdown
$('#mycontainer').html('');
});
See updated fiddle (which I tidied up a bit aswell).
Related
Let's say I have two drop-zones one below the other and I have a draggable element whose height is equal to the sum of the heights of the drop-zones and the spacing between them. When I drag the element over both the zones and release the mouse, the element gets appended to the bottom drop-zone rather than the top drop zone. What I need to do is if I place the element over both the zones , I want the element to drop into the first zone and not the second zone.
This is what I have tried so far.
FIDDLE
and this is the script
<script type="text/javascript">
var display_under_drag = '';
$(document).ready(function(e) {
$( ".draggable_display" ).draggable({revert: "invalid"});
$( ".draggable_display" ).on( "dragstart", function( event, ui ) {
display_under_drag = $(this).attr('id');
$('.droppable_display').each(function(index, element) {
//$(this).css({'border-color':'#3CC','border-style':'solid','border-width':'3px'});
});
});
$( ".draggable_display" ).on( "drag", function( event, ui ) {
$(this).css('z-index','3001');
$('.droppable_display').each(function(index, element) {
if($("#"+display_under_drag).hitTestObject($(this)))
{
//console.log($('#'+display_under_drag).data().display_type);
//console.log($(this).data().dim);
console.log($(this).attr('id'));
$(this).css({'border-color':'#3CC','border-style':'solid','border-width':'3px'});
}
else
{
$(this).css({'border-width':'0px'});
}
});
});
$( ".droppable_display" ).droppable({greedy: true,tolerance: 'touch',accept: ".draggable_display"});
$( ".droppable_display" ).on( "drop", function( event, ui ) {
//alert(display_under_drag);
if($('#'+display_under_drag).data().display_type == '2x1')
{
$('#'+display_under_drag).appendTo($(this));
$('.droppable_display').each(function(index, element) {
$(this).css({'border-width':'0px','z-index':'1000'});
});
$(this).css('z-index','3000');
//$('#'+display_under_drag).css({'position':'absolute','top':'0px','left':'0px'});
$('#'+display_under_drag).appendTo($(this));
$('.droppable_display').each(function(index, element) {
$(this).css({'border-width':'0px','z-index':'1000'});
});
$(this).css('z-index','3000');
$('#'+display_under_drag).css({'position':'absolute','top':'0px','left':'0px'});
}
});
$( '.draggable_display' ).on('mouseup',function(e){
$('.droppable_display').each(function(index, element) {
$(this).css({'border-width':'0px'});
});
});
});
</script>
Can someone help me out.
EDIT: There might multiple dropzones like this stacked next to each other. Like a 3x3 grid. In each case , the top dropzone should be the one which should accept the drop and not the bottom one. For instance , if I hover over column 1 => row 1 and row 2 , col1 row1 should be the dropzone. If I hover over column 1 => row 2 and row 3 , col1 row2 should be the dropzone.
It's for a game we are trying to develop.The drag and drop should work the way I have posted in the question.
So, I'm trying to use HTML links in my catcomplete results, but jquery automatically transforms my html code into text, like on the image:
And my jQuery code is:
$( "#global-search" ).catcomplete({
delay: 0,
source: "globalsearch.php"
});
Please, dont say to me to use select: function( event, ui ) {
window.location.href = ui.item.value;
}, because it works only once when using ajax (I really don't know why, but it just doesn't work), and I asked some questions here yesterday asking how to fix it, and nobody helped me with it.
So, back with the html transformed into text, how can I add an html hyperlink to my results?
globalsearch.php:
Take a look at the Custom Data and Display example. You will see that they have replaced the _renderItem method with a custom one. You'll need to do the same thing to override how your items are displayed.
$('#global-search').data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.data( "item.autocomplete", item )
.append((item.link) ? "<a href='" + item.link + "'>" + item.label + "</a>" : "<a>" + item.label + "</a>" )
.appendTo( ul );
};
Without seeing the output of your globalsearch.php I can't tell you exactly how to set it up, but basically you'd want to add a link attribute to your returned JSON and if the link exists, print the anchor with the link as its href.
How you handle the selection links vs outside links is left as an exercise to the OP.
From the autocomplete widget documentation
Independent of the variant you use, the label is always treated as
text. If you want the label to be treated as html you can use Scott
González' html extension. The demos all focus on different variations
of the source option - look for one that matches your use case, and
check out the code.
Scott González' html extension is https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.html.js. I have also posted the code below.
/*
* jQuery UI Autocomplete HTML Extension
*
* Copyright 2010, Scott González (http://scottgonzalez.com)
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* http://github.com/scottgonzalez/jquery-ui-extensions
*/
(function( $ ) {
var proto = $.ui.autocomplete.prototype,
initSource = proto._initSource;
function filter( array, term ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
return $.grep( array, function(value) {
return matcher.test( $( "<div>" ).html( value.label || value.value || value ).text() );
});
}
$.extend( proto, {
_initSource: function() {
if ( this.options.html && $.isArray(this.options.source) ) {
this.source = function( request, response ) {
response( filter( this.options.source, request.term ) );
};
} else {
initSource.call( this );
}
},
_renderItem: function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( $( "<a></a>" )[ this.options.html ? "html" : "text" ]( item.label ) )
.appendTo( ul );
}
});
})( jQuery );
EDIT try the code below while using the extension
$( "#global-search" ).catcomplete({
delay: 0,
html: true,
source: "globalsearch.php"
});
I have functioning jquery autocomplete search feature on my site where the user enters a partial name and it finds the matching full names from the database. The issue is that when there is a match, I've not been able to display the name matches using the following markup. It's working with the default autocomplete markup which is looking pretty bad. I need the results to show up in the li in the example below.
<div class="search_dropdown_wrapper">
<div id="search_arrow" class="dropdown_pointer search"></div>
<ul>
<li>
<a>Sam Cohen</a>
<p>Software Engineer</p>
</li>
</ul>
</div>
I'm having trouble wrapping the ul in the autocomplete with the above divs. I've tried playing with the code and I got it to partially display the results with the markup but the link feature got messed up and clicking on the name no longer populated the text box. Here is the autocomplete code I'm using..
if($('#search_name').length > 0){
$('#search_name').autocomplete({
minLength: 2,
source: '/profiles/jquery_auto_complete_name',
focus: function(event, ui) {
$('#search_name').val(ui.item.first_name + " " + ui.item.last_name);
return false;
},
select: function(event, ui) {
$("#receiver-list").val(ui.item.first_name + " " + ui.item.last_name);
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append("<a>" + item.first_name + " " + item.last_name + "</a>")
.appendTo( ul );
};
}
(credit: thanks to How to set-up jquery-ui autocomplete in Rails for a great example of auto-complete)
Thank you.
You can find a marvelous gem for this:
https://github.com/crowdint/rails3-jquery-autocomplete
Best regards!
This question already has answers here:
JQuery AutoComplete, manually select first searched item and bind click [duplicate]
(2 answers)
Closed 9 years ago.
I am using jquery autocomplete which I am populating from a ruby on rails application and I am creating a custom autcomplete like so:
$.widget( "custom.code_complete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var self = this,
currentCategory = "";
$ul = ul;
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
self._renderItem( ul, item );
});
}
});
$("#r-code").code_complete({
source: "URL",
minLength: 2,
select: function(event, ui) {
$(".button-row").fadeIn();
get_details(ui.item.url);
}
});
I am redirecting a user from another page to the page with the autocomplete form with a parameter in the URL which is a code used for the search, here is the JS to do the search:
function ac_search(code) {
$("#r-code").val(code);
$("#r-code").code_complete('search', code);
}
This performs the search perfectly and displays the drop down list of results. I am trying to have the script then select the first result in the list. I have tried doing it via a selector:
$(".ui-menu-item:first a").click();
This finds the correct element in the autocomplete list but when I try and simulate a click it gives this error:
TypeError: ui.item is null
Is it possible to programmatically click the first item in the autocomplete results list?
Cheers
Eef
$( el ).autocomplete({
autoFocus: true
});
use autoFocus: true
$( el ).autocomplete({
autoFocus: true
...
});
I have a loading animation which I initially hide in my application.js file:
$('#loading_field').hide();
I have an autocomplete field, and I want the animation to appear when the user starts typing, and for it to disappear when the autocomplete suggestion results appear. Below is my jquery code for the jquery ui autocomplete plugin:
$(".showable_field").autocomplete({
minLength: 1,
source: '/followers.json',
focus: function(event, ui) {
$('.showable_field').val(ui.item.user.name);
return false;
},
select: function(event, ui) {
var video_id = $('#video_id_field').val();
var user_id = ui.item.user.id;
$.post("/showable_videos.js", {video: video_id, user: user_id});
$(':input','#new_showable_video').not(':button, :submit, :reset, :hidden').val('');
return false;
}
});
var obj = $(".showable_field").data('autocomplete');
obj && (obj._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.user.name + "</a>" )
.appendTo( ul );
});
Where should I show and hide the animation?
Well, jQuery UI automatically adds the class 'ui-autocomplete-loading' to your input when it is loading remote data, so the absolute easiest way to do this is to simply put an animated GIF in as the background image on your input when that class is present.
That's what they do in the remote-loaded example on jQueryUI.com (note that you have to type two more more characters to kick off the ajax call in this example).
<style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
Because you're using AJAX to load the suggestions I think this should work for you:
$('#loading_field').ajaxStart(function () {
$(this).show();
}).ajaxStop(function () {
$(this).hide();
});