关于 autosuggest jquery 插件的菜鸟问题
我想使用此插件 AutoSuggest jQuery 插件 对我的文本字段进行一些自动建议
我有一个数组,已经 json_encoded,以及服务器上的文件、js、css,但我还不知道该示例是如何工作的,这里是我的代码,
<html>
<head>
<title>test-data</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="inc/css/admin_style.css" rel="stylesheet" type="text/css">
<link href="inc/css/autoSuggest.css" rel="stylesheet" type="text/css">
<script language="javascript" src="inc/js/functions.js"></script>
<script language="javascript" src="inc/js/jquery-1.5.1.js"></script>
<script language="javascript" src="inc/js/jquery.autoSuggest.js"></script>
<script language="javascript" type="text/javascript">
</script>
</head>
<body>
<center><br><font class="title">test</font></center>
<form action="dataAll.php" method="post">
Name: <input type="text" name="fname" />
<input type="submit" />
</form>
<p> </p>
<p>JSON</p>
<p> </p>
<?php
$encoded = json_encode ($familyNames);
echo $encoded;
?>
</body>
</html>
所以我应该放置此代码,
$(function(){
$("input[type=text]").autoSuggest(data);
});
- 但问题是在哪里??(如果我把它放在 php 标签中,它会给我一个错误,
- 应该将 json 格式数组的名称放在哪里?“$encoded”以便函数识别这是数据源?
我
I want to do some autosuggest for my text field, using this plugin AutoSuggest jQuery Plugin
I have an array, already json_encoded, and the files on the server, js, css, but Im not getting yet how the example works, here my code,
<html>
<head>
<title>test-data</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="inc/css/admin_style.css" rel="stylesheet" type="text/css">
<link href="inc/css/autoSuggest.css" rel="stylesheet" type="text/css">
<script language="javascript" src="inc/js/functions.js"></script>
<script language="javascript" src="inc/js/jquery-1.5.1.js"></script>
<script language="javascript" src="inc/js/jquery.autoSuggest.js"></script>
<script language="javascript" type="text/javascript">
</script>
</head>
<body>
<center><br><font class="title">test</font></center>
<form action="dataAll.php" method="post">
Name: <input type="text" name="fname" />
<input type="submit" />
</form>
<p> </p>
<p>JSON</p>
<p> </p>
<?php
$encoded = json_encode ($familyNames);
echo $encoded;
?>
</body>
</html>
so Im supposed to put this code,
$(function(){
$("input[type=text]").autoSuggest(data);
});
- but the question is where??( as if I put it inside the php tags, it gives me an error
- where should I put the name of my json formatted array? "$encoded" for the function to recognize that is the source of data?
thanks a lot!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您已经掌握了所有内容,但您的顺序/方法有点不对劲。尝试创建第二个文件,命名为
ajax.php
,并将所有 php 代码放入其中。为了确保输出正确的 JSON,请在ajax.json 的最开头添加行
文件(您必须在发送任何输出之前设置标头,否则您将收到错误)。现在您必须请求建议数据:header('Content-Type: text/json; charset=ISO-8859-1');
。 php此代码只是对
ajax.php
执行异步 HTTP 请求,并将返回的 JSON 数据交给自动建议 jQuery 插件。将其放在标记内。由于使用了
$(document).ready(...)
,它将在页面加载时运行一次。我添加了一些小优化 (input[name="fname"]
),因此 jQuery 不会尝试将自动建议功能附加到页面上的每个文本输入。如果这就是您想要做的(不太可能),只需将其改回input[type=text]
即可。你真的不需要一个单独的 php 文件来让它工作。没有什么可以阻止您在一个文件中完成所有操作,但您很快就会意识到这会变得多么混乱和难以管理。对我来说,最容易将我的“ajaxy”php 代码视为我的 Web 应用程序的单个模块化部分。
请务必参考以下页面以获取详细信息:
You've got all the pieces, but your order/methodology is a bit off. Try creating a second file, named something like
ajax.php
, and place all of your php code in there. To ensure you are outputting good JSON, add the lineheader('Content-Type: text/json; charset=ISO-8859-1');
at the very beginning of theajax.php
file (you must set the header before any output is sent or you'll get an error). Now you've got to request your suggestion data:This code simply executes an asynchronous HTTP request for
ajax.php
, and hands off the returned JSON data to the auto-suggest jQuery plugin. Place it inside a<script type="text/javascript"></script>
tag. It will run once when the page loads due to the use of$(document).ready(...)
. I added the small optimization (input[name="fname"]
) so jQuery doesn't attempt to attach the auto suggestion functionality to every text input you have on your page. If thats what you wanted to do (unlikely), just change it back toinput[type=text]
.You really do not need a separate php file to get this to work. There is nothing stopping you from doing it all in one file, but you'll soon realize how cluttered and unmanageable that can get. For me, its easiest to think of my "ajaxy" php code as a single, modular piece of my web application.
Be sure to reference these pages for detailed information:
你把它放在 html 的标签内。
You put it inside a tag in the html.