使用 Node.JS express 和 AJAX 进行 JQuery 自动完成

Posted

技术标签:

【中文标题】使用 Node.JS express 和 AJAX 进行 JQuery 自动完成【英文标题】:JQuery autocomplete with Node.JS express and AJAX 【发布时间】:2013-02-20 10:26:27 【问题描述】:

这是 html

<!DOCTYPE html>
<html>
<head>

<link rel="shortcut icon" href="/favbar.png" />


<!-- javascript -->
<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>
<script type="text/javascript">
$(function () 

    $("#search").autocomplete(

        source: function( request, response ) 
          $.ajax(
              url: "/search",
              dataType: "jsonp",
              data: 
                 featureClass: "P",
                 style: "full",
                 maxRows: 12,
                 term: request.term
              ,
              success: function( data ) 
                  response( $.map( data.results, function( item ) 
                       return 
                          label: item,
                          value: item
                       
                  ));
             
          );
       

    );

  );
</script>
<script src="/stylesheets/bootstrap/js/bootstrap.min.js"></script>
<!-- CSS -->
<link href="/stylesheets/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/stylesheets/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/stylesheets/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link type="text/css" href="/stylesheets/bootstrapui/css/custom-theme/jquery-ui-1.10.0.custom.css" rel="stylesheet" />

</head>
<body>

   <input type="text" id="search" class="search-query" placeholder="Search..." />


</head>
</body>
</html>

这是 node.js 代码:

app.post('/search', function (req, res)

   var regex = new RegExp(req.body.term);

   usermodel.aggregate($match:  user: regex , function (err, users)

      if (err) throw err;

      var names = [];

      for (var nam in users) 

          names.push(users[nam].user);

      

      var result =  results: names 

      res.json(result);

    );

);

此代码不起作用。我得到了完美的 AJAX 请求,问题是 Node.js 响应。我不知道是响应的类型,还是我发送它的方式。 names 在一个包含所有结果的数组中,我像这样发送它 result: names 。也许我应该只发送res.json(result)。在某些示例中使用 GET 请求,而我使用 POST,我应该更改它吗? 我使用 mongodb 和 mongoose 作为数据库。

我该怎么做?谢谢提前!

【问题讨论】:

你的 response() 函数在哪里? 它必须在哪里?不知道你说的是节点服务器还是前端JS代码? 【参考方案1】:

对于自动完成表单,我推荐twitter typeahead。非常简单,易于使用且功能强大。

一些例子在:http://twitter.github.com/typeahead.js/examples/

文档和代码在:http://twitter.github.com/typeahead.js

【讨论】:

它于 2 月 20 日由 twitter 开源。你用很少的代码做很多事情。我很喜欢。很好,它帮助了你。

以上是关于使用 Node.JS express 和 AJAX 进行 JQuery 自动完成的主要内容,如果未能解决你的问题,请参考以下文章

Ajax--express框架介绍与基本使用

phonegap ajax 用户身份验证与 nodejs-express-mongodb-passport js

使用 Ajax 和 Node.js 的简单按钮单击示例?

Node.JS、Express 和 Heroku - 如何处理 HTTP 和 HTTPS?

来自express js的Ajax发布响应不断抛出错误

如何使用 express.js 在 Ajax 调用中实现 CSRF 保护(寻找完整示例)?