I pasted the sample code from here in my .cshtml file just to see if it works with hard-coded data.
For some ready, the autocomplete doesn't work when I type.
The following is the code:
<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>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</div><!-- End demo -->
There are other controls and tables etc after this of course.
Can anyone spot where I may be going incredibly wrong?
Try adding this to your .cshtml. It's what I use to get the intellisense working.
#if (false) { <script src="/Scripts/jquery-1.7.2-vsdoc.js" type="text/javascript"></script> }
This code works. You need to include:
jquery js
jquery-ui css
jquery-ui js
Your code example (without css): jsfiddle.net/cZYuA/
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>
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);
}
The bug founded when I enter the value to the texbox while I am mouse over the autocomplete menu, when I mouse out the menu the textbox gain the original value even when I put focus: return false.
<label for="tags">Tags: </label>
<input id="tags" />
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
var tags = $("#tags").autocomplete({
source: availableTags,
focus: function(event, ui){
return false;
}
});
availableTags.push("foo");
tags.autocomplete( "option", "source", availableTags);
window.setTimeout(function(){$("#tags").val("BASIC")},10000 );
What I am doing is puttin "BASIC" value after 10 secs and if you have the mouse over the autocomplete menu than when you will mouse out the #tags value will be back to origin and I don't want this to happen.
Can I workaround this?! How?! thanks
It was corrected on the next release so for the moment you have to use:
<script src="http://code.jquery.com/ui/jquery-ui-git.js" type="text/javascript"></script>
and not the downloaded from jquery-ui site.
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');">