I already read all the topics there about a similar issue but no real solution.
I just received an old project using Jquery UI, the form has a autocomplete input, it works perfectly on computers & phones, when you type 3 letters minimum, it suggests a list of words.
BUT when you try the same form on iPad, nothing happens. It suggests nothing.
Here the code (based on Jquery 2.2.3 & Jquery UI 1.11.4) :
HTML :
<input type="text" class="form-control autocomplete-multiple-theme-name ui-autocomplete-input" style="width: 100%;" autocomplete="off">
<input type="hidden" class="autocomplete-multiple-theme-id">
JS :
$(".autocomplete-multiple-theme-name").autocomplete({
minLength: 3,
source: 'themes/themes_json.php',
focus: function( event, ui ) {
$(this).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$(this).val( ui.item.label);
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>" + item.label + "</div>" )
.appendTo( ul );
};
Any idea to fix that ?
Thanks a lot everybody !
Related
I am using a jQuery Autocomplete to populate a list of names from a database and then assign the compId number to a hidden input.
I want to be able to access the compId value as soon as the user selects a company and assign it to a variable that I can use in conjunction with PHP and a MySQL statement prior to the user moving on.
Here is the jQuery:
$(function() {
function log( message ) {
$("#compId").val(message);
$( "#compId" ).scrollTop( 0 );
}
$( "#companyForm" ).autocomplete({
source: "/autoComp/companies.php",
minLength: 2,//search after two characters
select: function( event, ui ) {
log( ui.item ? ui.item.id : "");
}
});
});
HTML:
<input type="hidden" id="compId" name="compId" required />
The autocomplete is working fine, just don't know how to access it immediately after the value is filled.
Thanks!
Apologies if I misunderstood what you are asking but there is a response event you can chain on to your autocomplete call like so:
http://api.jqueryui.com/autocomplete/#event-response
$(function() {
function log( message ) {
$("#compId").val(message);
$( "#compId" ).scrollTop( 0 );
}
$( "#companyForm" ).autocomplete({
source: "/autoComp/companies.php",
minLength: 2,//search after two characters
select: function( event, ui ) {
log( ui.item ? ui.item.id : "");
},
response: function () {
alert($("#compId").val());
}
});
});
I am using jquery ui 1.10.3 and jquery 2.0.3.
I am trying to use the autocomplete function to change text of another text box on selecting an option from the suggested options from autocomplete.
Below is my code for the autocomplete function. I do get the results as needed but when I select an option from it, I get the TypeError: ui.item is undefined error.
<script language="javascript">
$(document).ready(function(){
$('#item_code').autocomplete({
source: "http://localhost/test/item/search_item",
minLength: 1,
select: function( event, ui ) {
$( "#item_description" ).val(ui.item.description );
return false;
}
}).data("ui-autocomplete" )._renderItemData = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.value + " - " + item.description + "</a>" )
.appendTo( ul );
};
});
</script>
I have scoured the net but I have come to a point where I find banging my head on the table.
Any help is greatly appreciated.
You should only need to change the one data property:
.data('item.autocomplete')
was deprecated in favour of
.data('ui-autocomplete-item')
As of jQuery UI 1.9 and removed as of jQuery UI 1.10
http://jqueryui.com/upgrade-guide/1.10/#removed-item-autocomplete-data-use-ui-autocomplete-item
I had a similar problem, but this was because the jQuery documentation now shows the usage for jQuery UI 1.10 and our website is still using jQuery UI 1.8.20.
This is what worked for me in the end.
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "<br><b>" + item.category + "</b></a>").appendTo(ul);
};
turns out I had to change
data("ui-autocomplete" )._renderItemData = function( ul, item ) {
and
.data( "item.autocomplete", item )
to
data("ui-autocomplete" )._renderItem = function( ul, item ) {
and
.data( "item.autocomplete-item", item )
hope this helps anyone who has migration issues with jQuery UI
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!
I run into a problem with jQuery UI - Autocomplete and IE8.
I'm using combobox method which you can find on jQuery UI website - here
Basically, it is creating autocomplete input + select menu from select/option list.
I'm using jQuery 1.6.4 and jQuery UI 1.8.16; both from google server.
It is working perfectly on Chrome / FF / Opera, but does not work on IE8.
On IE8 - once you select something (after typing), or use dropdown button IE will reload the page. Please not that IE will not crash till you use arrows or try to select something.
res://ieframe.dll/acr_error.htm#, in the URL, in front of the actual path
or a message this tab has been reloaded; a problem with the page causes IE to close and reopen the page
Live example here
Any idea what is causing IE to act like that? Any suggestion much appreciated.
jQuery code:
<script>
(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
var input = this.input = $( "<input>" )
.insertAfter( select )
.val( value )
.autocomplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( this ).val( "" );
select.val( "" );
input.data( "autocomplete" ).term = "";
return false;
}
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
input.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
this.button = $( "<button type='button'> </button>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.insertAfter( input )
.button({
text: false
})
.removeClass( "ui-corner-all" )
.click(function() {
// close if already visible
if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
input.autocomplete( "close" );
return;
}
// work around a bug (likely same cause as #5265)
$( this ).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
input.focus();
});
},
destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
})( jQuery );
$(document).ready( function() {
$("#combobox").combobox();
});
</script>
I'm still trying to work out why IE8 is crashing but it does work for me when you add a jQueryUI theme to the page, for example:
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css">
Edit: I think I know which line it is crashing on, but I still do not know why! In the jQueryUI code activate: function( event, item ) {
is the following code which adds style and an attribute to the active item.
this.active = item.eq(0)
.children("a")
.addClass("ui-state-hover")
.attr("id", "ui-active-menuitem")
.end();
For some reason, IE8 crashes here, although for me sometimes does not crash when I remove the .addClass and .attr lines.
Edit 2: OK, for some reason IE is crashing with your .ui-autocomplete style. If you change overflow:scroll; to overflow:auto; then IE8 does not crash. Alternatively change max-height to just height, which also fixes it. Guess it's a bug in IE either with max-height (maybe IE8 overflow:auto with max-height) or overflow.
From the first glance this line look strange to me:
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
But its working fine for me in ie8, in ie7 its not working at all.
Try if(){return{...}}.
quick look finds your script tag is missing required type attribute
<script type="text/javascript">
I reproduced the issue, copied the file local with no CSS and no fails.
Odd, IF on the original page, I disable CSS using the IE developer tools, it does not crash.