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.
Any advice will be very appreciated.
This is the code that I have:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
.
As j08691 says, you have to handle the open event of the widget. However, since you also want to select the items in the #results element, copying them will not be enough.
I would suggest you reparent the whole autocompletion menu under your #results element instead, and reset its position style attribute to static so it remains in place:
$("#tags").autocomplete({
source: availableTags,
open: function() {
$(this).autocomplete("widget")
.appendTo("#results")
.css("position", "static");
}
});
You can see the results in this update to your fiddle.
Use autocomplete's open event like in this jsFiddle example.
open: function(e, ui) {
var list = '';
var results = $('ul.ui-autocomplete.ui-widget-content a');
results.each(function() {
list += $(this).html() + '<br />';
});
$('#results').html(list);
}
Related
I have used code from http://jqueryui.com/autocomplete/#default which is working fine in FF and Chrome but not working for IE8 version 8.0.7600.16385. The developer console states
'null' is null or not an object
What's wrong?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Web.XXX.XXX.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function ()
{
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
$("#tags").autocomplete({ source: availableTags });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input type="text" id="tags" />
</div>
</form>
</body>
</html>
It is resolved with using internal Jquery files and noconflict function.
<script src="/JqueryPlugins/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="/JqueryPlugins/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="/JqueryPlugins/ui/jquery.ui.position.js" type="text/javascript"></script>
<script src="/JqueryPlugins/ui/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script>
$J = jQuery.noConflict();
$J(function ()
{
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
$J("#tags").autocomplete({ source: availableTags });
});
</script>
How to get source to Jquery Autocomplete UI from classic asp page?
i found that default code. But i want to take my results from another asp page. How may i send with asp and get jQuery?
I need little help.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
one solution is to response write the data directly to the output.
e.g. this is how your classic asp:
I have no way to run this code but it should look something like that...
<%
function getListOfTags()
{
try
{
var objRs = new ActiveXObject("ADODB.Recordset");
}
catch (e)
{
alert("ADODB namespace not found.");
exit(0);
}
strTagList = "";
strConn = "Provider=" +DP+
";Initial Catalog=" +DB+
";Data Source=" +DS+
";Integrated Security=SSPI;"
strComm = "SELECT ProductID,ProductName,UnitPrice "+
"FROM Products " +
"WHERE CategoryID = 7" // select Produce
objRs.open(strComm, strConn, adOpenForwardOnly, adLockReadOnly, adCmdText);
objRs.MoveFirst();
while (objRs.EOF != true)
{
strTagList += '"'+objRs("TagName")+'",'
objRs.MoveNext();
}
objRs.Close
objRs = null;
return (strTagList);
}
%>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
var availableTags = [
<%= getListOfTags() %>
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
You can use a remote data source for jQuery auto-complete.
Check this EXAMPLE on jQuery.com
$( "#birds" ).autocomplete({
source: "search.asp",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
Here search.asp is a page that returns you the list of items in JSON format.
I've been trying to create a resizable autocomplete (and I'm not even sure if this would be possible!). I've tried a lot of things getting ideas from google but have not been able to accomplish it.
The code I've creates a resizable menu but it's not aligned to the bottom of the text box and when I search the 2nd time the resize option disappears. Is there a way of fixing it or can this functionality be achieved in any other way?
<head runat="server">
<title></title>
<link href="~/css/1.8/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="~/script/jquery/1.5/jquery.min.js"></script>
<script src="~/script/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
.ui-resizable-se
{
bottom: 0px;
}
.ui-autocomplete
{
background: silver;
overflow-y: hidden; /* prevent horizontal scrollbar */
overflow-x: hidden;
}
</style>
<script>
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags,
open: function (event, ui) {
$('ul.ui-autocomplete').resizable();
}
});
});
$(function () {
$("#ul.ui-autocomplete").resizable({
handles: "se"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui-widget">
<label for="tags">
Tags:
</label>
<input id="tags">
</div>
</form>
</body>
</html>
It does work for me with different versions of jquery and jquery ui (resizing autocomplete dropdown).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
JSFiddle
Here is a fiddle that works:
http://jsfiddle.net/gU5Tb/3/
Your version of jQuery and jQuery UI are deprecated.
<html>
<head runat="server">
<title></title>
<link href="~/css/1.8/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="~/script/jquery/1.9.1/jquery.min.js"></script>
<script src="~/script/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style>
.ui-resizable-se
{
bottom: 0px;
}
.ui-autocomplete
{
background: silver;
overflow-y: hidden; /* prevent horizontal scrollbar */
overflow-x: hidden;
}
</style>
<script>
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags,
open: function (event, ui) {
$('ul.ui-autocomplete').resizable();
}
});
});
$(function () {
$("#ul.ui-autocomplete").resizable({
handles: "se"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui-widget">
<label for="tags">
Tags:
</label>
<input id="tags">
</div>
</form>
</body>
</html>
I am using jquery autocomplete for a text area. I want the autocomplete function to be called whenever i press "Space-Bar". It works fine only the first time. Could someone please help me out with this?**
I have used the following code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> </script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script>
function auto_comp(flag1)
{
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme",
"{ }"
];
if(flag1 == 1)
{
$( "#tags" ).autocomplete({
source: availableTags
});
}
});
}
</script>
<div class="demo">
<div class="ui-widget">
<textarea id="tags" name="get" rows="5" cols="31"></textarea>
<script>
var charfield=document.getElementById("tags");
var flag=0;
charfield.onkeypress=function(e){
var e=window.event || e;
var keyunicode=e.charCode || e.keyCode;
if(keyunicode == '97'|| keyunicode == '65')
{
flag=1;
auto_comp(flag);
}
document.getElementById("unicode").value=keyunicode;
}
</script>
</body></html>
Try the following:
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
https://github.com/mataki/jquery-textarea-imput-support
jQuery autocomplete is a widget, and as such doesn't need to be called every time you need it to do something. What you could do instead is this:
$( "#tags" ).autocomplete({
source: availableTags
}).bind( "autocompletesearch", function(event, ui) {
return !(event.keyCode == '97'|| event.keyCode == '65');
});
I think you are looking for this :
Jquery Ui Auto-complete multiple values (Click here)
I've created a simple auto-complete control using JQuery UI. I have a default value for the input field that reads "Enter your keywords...". I've set up a focus() event that will clear the input when a user sets the focus to the input field to being typing.
In IE when you being typing and the menu displays a list of items, when picking an item from the menu item focus() is called again. This extra call to focus() only happens in IE. The side effect is that the selected menu item is cleared from the text field.
I have a very primitive solution to this by making use of the autocomplete.focus() event. This event is fired when the user hovers over a selected menu item. Here I can set a global boolean variable that can be used to tell the focus() event on the input field that the menu item is active/visible and thus not to clear the input value. This is a hack, of course!
Is there an alternative (less hacky!) solution to this problem?
Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Autocomplete demo</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<script>
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags,
focus: function (event, ui) {
// This event fires when an item from the menu is selected (in focus)
// set some variable here to tell the focus() call to the text field not to clear the value from the input field
},
});
$("#tags").focus(function () {
// clear the input value
$("#tags").val("");
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" value="Enter your keywords..." />
</div>
</div>
</body>
</html>
UPDATE
With the slight tweak to this solution and with help from the provided answer this now works in IE 8 & 9.
$(document).ready(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags
});
$("#tags").focus(function () {
// clear the input value
$("#tags").val("");
return false;
});
})
We had a similar issue and I believe we fixed it by adding a return false; to the focus method:
$("#tags").focus(function () {
// clear the input value
$("#tags").val("");
return false;
});
Also, it looked like you had an extra (trailing) comma after your focus declaration. Might want to clean that up.
UPDATE
After playing around with your code a bit in jsbin.com, I think I found the solution to your specific issue with IE, but I'm not 100% on why it only dies in IE.
Example: http://jsbin.com/aqituk/2/edit#javascript,html
The difference was changing the $(function() { ... to the full document ready function, $(document).ready(function() {...
Hope this helps!
Replace your code with below code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Autocomplete demo</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<script>
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags
select: function(event, ui){
var yourTxt= $(this);
yourTxt.value = ui.item.value;
}
});
$("#tags").mouseup(function () {
// clear the input value
$("#tags").val("");
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" value="Enter your keywords..."/>
</div>
</div>
</body>
</html>
I'd just been tired to solve for same matter.
Finally, I've just taken simple solution shown below:
// onload
$('#foo').autofocus({
// add options
disabled: true
});
<input id="foo" onclick="$(this).autocomplete('enable');">