jquery autocomplete doesn't work on localhost
I hope you can help me.
I have used on a localhost aspx page the following code so it autoc开发者_StackOverflowompletes.
It works perfect.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
</head>
<body>
API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>
*However, when I download the scripts etc and run it in my local server (see code below), it doesn't work and it doesn't give me any errors The page does take approx 10 seconds to load (instead of <1 second)
The autocomplete function doesn't work on the page, but everything else does.
Can anyone tell me what I am doing wrong ? Is there something I have to additional turn on locally or download ?
I am quite new at this so thanks for your pacience.
Also, I would like the data to come from a file, instead of the variable data.
I have downloaded the file called "jquery-1.3.2.min.js" as well and put it in the same directory as the other scripts...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta content="es" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Search POL-POD</title>
<style type="text/css">
.tahoma_small {
font-family: Tahoma;
font-size: x-small;
}
</style>
<script src="../autocomplete/jquery-latest.js"></script>
<link rel="stylesheet" href="../autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="../autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function() {
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#txtfirst").autocomplete(data);
$("#txtsecond").autocomplete(data);
});
</script>
</head>
<body>
<form id="form1" runat="server" enableviewstate="False" autocomplete="True">
POL
<asp:TextBox id="txtfirst" runat="server"></asp:TextBox>
POD
<asp:TextBox id="txtsecond" runat="server"></asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Button" />
<br />
....etc
First thing to do would be to include the file jquery-1.3.2.min.js into your document before any other script file that uses jquery, unless that's what jquery-latest.js is.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
You are not getting any javascript errors?
finally after a lot of testing/searching, I found a solution.
Thanks anyway for your help!
I took out the "../" on all the links:
So: <script src="../autocomplete/jquery.autocomplete.js"></script>
is now: <script src="autocomplete/jquery.autocomplete.js"></script>
So here is all the code (you need the .js and .css files mentioned inside the "autocomplete" directory in order to work)
I hope it helps someone !
By the way, I have a total of 1200 cities in the variable "cities" and the .aspx page is only 20Kb
I also tested using a .csv file to import the data, but it took several seconds to load...having the values within the .aspx page is lightning fast and the page is still quite small (obviously it is not a good idea if you have several thousand values)
...
</style>
<script src="autocomplete/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="autocomplete/jquery.autocomplete.js" type="text/javascript"></script>
<link href="autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function() {
// datavalues is the array containing all the options...the .split(","); at the end means each option is separated by a comma,
var cities= "Madrid,Paris, Barcelona,Rome,London".split(",");
$("#txtfromcity").autocomplete(cities);
$("#txttocity").autocomplete(cities);
});
</script>
</head>
<body>
<form id="form1" runat="server" enableviewstate="False" autocomplete="True">
POL
<asp:TextBox id="txtfromcity" runat="server"></asp:TextBox>
POD
<asp:TextBox id="txttocity" runat="server"></asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Button" />
...
As mentioned, make sure the necessary JavaScript files are loaded. Since you're coding in ASP.NET, you might want to use ResolveUrl to make sure these files are referenced correctly, independent of the requested page's location.
<script src="<%# ResolveUrl("~/autocomplete/jquery-latest.js") %>" type="text/javascript"></script>
<script src="<%# ResolveUrl("~/autocomplete/jquery.autocomplete.js") %>" type="text/javascript"></script>
加载中,请稍侯......
精彩评论