关于 autosuggest jquery 插件的菜鸟问题

发布于 2024-10-21 12:36:51 字数 1593 浏览 4 评论 0原文

我想使用此插件 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>&nbsp;</p>
  <p>JSON</p>
  <p>&nbsp;</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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

风向决定发型 2024-10-28 12:36:51

您已经掌握了所有内容,但您的顺序/方法有点不对劲。尝试创建第二个文件,命名为ajax.php,并将所有 php 代码放入其中。为了确保输出正确的 JSON,请在 ajax.json 的最开头添加行 header('Content-Type: text/json; charset=ISO-8859-1'); 。 php 文件(您必须在发送任何输出之前设置标头,否则您将收到错误)。现在您必须请求建议数据:

$(document).ready(function() {   // Runs when your page is loaded in the user's browser
    $.getJSON('ajax.php', function(data) { // Runs ajax.php, then executes an anonymous function to handle the response
        $('input[name="fname"]').autoSuggest(data); // Set your input field to use automatic suggestions with the returned data
    }); // end getJSON
}); // end ready

此代码只是对 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 line header('Content-Type: text/json; charset=ISO-8859-1'); at the very beginning of the ajax.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:

$(document).ready(function() {   // Runs when your page is loaded in the user's browser
    $.getJSON('ajax.php', function(data) { // Runs ajax.php, then executes an anonymous function to handle the response
        $('input[name="fname"]').autoSuggest(data); // Set your input field to use automatic suggestions with the returned data
    }); // end getJSON
}); // end ready

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 to input[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:

烙印 2024-10-28 12:36:51

你把它放在 html 的标签内。

<script type="text/javascript">
 $(function(){
 $("input[type=text]").autoSuggest(data);
 });
</script>

You put it inside a tag in the html.

<script type="text/javascript">
 $(function(){
 $("input[type=text]").autoSuggest(data);
 });
</script>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文