Node.js配合jQuery UI autocomplete的应用
Node.js擅长的领域为：
- 不需要很多运算
- 吞吐量要求高
- 进消息轻并且要求快
- 出消息轻并且要求快
网上的例子都是socket.io的，我一直在想到底能用在什么地方？根据node.js的优点（擅长领域），想出了这个应用场景：
jQuery UI的autocomplete应用场景，这个需要的数据都是很零碎却量多的。
结构如下：
- 用ASP.NET MVC4新建一个web站点，在这里编写jQuery UI autocomplete代码
- 用WebMatrix编写Node.js代码（主要是基于express的路由）
由于这2个都是独立的站点，因此涉及到跨域问题，使用JSONP解决（其实在js代码调用和node.js端都要修改相应的代码）。
先贴ASP.NET MVC4的代码
<head>
<title></title>
<link href="jqueryui/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet"
type="text/css" />
<script src="jqueryui/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="jqueryui/js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script>
$(function () {
$("#searchKey").autocomplete({
source: function (request, response) {
$.ajax({
type: "get",
async: false,
url: "http://localhost:22912/users/" + request.term, //这里是Node.js的url
dataType: "jsonp",
success: function (data) {
response($.map(data, function(item){
return {label: item.UserName,value: item.UserName}
}
)//转换成label, value形式，以便UI中显示
);
},
error: function () {
alert('fail');
}
});
}
});
});
</script>
</head>
<body>
<input id="searchKey" size="50" />
</body>
然后建立Node.js程序，先看看WebMatrix的新建Node.js Dialog：
新建后，会看到一堆文件建立了，先看看server.js入口文件，再看路由文件：
var express = require('express') //导入express模块
, http = require('http') //导入http核心模块
, path = require('path') //同上
, routes4users = require('./routes/users'); //导入自己编写的users路由模块
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views'); //存放视图的文件夹，和asp.net mvc类似用途
app.set('view engine', 'jade'); //类似于asp.net mvc的razor，不过jade语法不同，并且接近于coffeescript那样采用缩进
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/users/:name', routes4users.users_getCollectionByName);
//类似于asp.net mvc中的路由，mvc下为：{controller}/{action}/{id}，Node.js中用:前缀为参数
//routes4users.users_getCollectionByName是我们要编写的主要处理函数
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
看看users.js文件：
function UserInfo()
{
this.UserName = null;
this.Age = -1;
} var users = new Array(); //模拟数据库
for (var i = 0; i < 10; i++) { //加入数据
var u=new UserInfo();
u.UserName = "aaron" + i;
u.Age = i;
users.push(u);
} exports.users_getCollectionByName = function (req, res) { //server.js中，路由/users/:name的对应函数
var searchKey = req.params.name; var result = new Array();
for (var i = 0; i < users.length; i++) {//模拟搜索逻辑
if (users[i].UserName.indexOf(searchKey) >= 0) {
result.push(users[i]);
}
}
var callbackFunctionName = req.query.callback;//jQuery的JSONP调用会设置这个参数，通过querystring的方式传过来 res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
var str = JSON.stringify(result);
str = callbackFunctionName+"(" + str + ")";//这句很重要
res.send(str);
}
运行效果图：
Node.js配合jQuery UI autocomplete的应用的更多相关文章
- JQuery UI Autocomplete与jquery.autocomplete.js
程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...
- jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式
直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...
- jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList
0.引言 1.起因 一开始使用Autocomplete做了一个自动补全的文本框,如上图.后来因业务需要希望能在这个文本框的边上做个下拉列表按钮,一按就展开所有支持 ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件
支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...
- jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,
jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...
- 可输入自动匹配Select——jquery ui autocomplete
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- jQuery.ui autoComplete使用
官网 http://api.jqueryui.com/autocomplete/#option-source 参考了 http://www.cnblogs.com/lwme/archive/2012 ...
- jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框
$("#search").autocomplete({ minLength: 0, source: function(request,response){ // request对象 ...
- jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...
随机推荐
- 简单 PHP + MySQL 数据库动态网站制作 -- 摘抄
在这篇文章中,我尽量用最浅显易懂的语言来说明使用 PHP, MySQL 制作一个动态网站的基本技术.阅读本文需要简单的 HTML 基础知识和(任一编程语言的)编程基础知识(例如变量.值.循环.语句块的 ...
- mysql之用户权限管理
本文内容: 什么是用户权限 恰当的用户权限 查看权限 修改权限 删除权限 首发日期:2018-04-19 什么是用户权限: 每个用户都有自己的用户权限,这些用户权限比如有查询表权限.修改表权限.插入表 ...
- Docker Data Center系列（四）- 离线安装UCP和DTR
本系列文章演示如何搭建一个mini的云平台和DevOps实践环境. 基于这套实践环境,可以部署微服务架构的应用栈,演练提升DevOps实践能力. 1 离线安装UCP 1.1 可用版本 Version ...
- tkinter进阶版——ttk
很长的一段时间里,我都是用tkinter进行GUI设计的,还写过一篇<tkinter模块常用参数>. 但后来慢慢地觉得,这个tkinter真的是有点丑啊. 于是,找到了现在的ttk. tt ...
- Hibernate设置事务的隔离级别
方式有两种: 1)修改配置文件hibernate.cfg.xml实现 <hibernate-configuration> <session-factory> ...... &l ...
- 【底层原理】深入理解Cache （下）
得到了我的PC的cache参数如下: L1 Cache : 32KB , 8路组相连,linesize为 64Byte 64个组 L2 Cache:256KB 8路组相连,linesize为 64By ...
- 两层c:forEach循环嵌套
jsp中两级菜单如何用c:forEach输出 items 要被循环的信息 否 无 begin 开始的元素(0=第一个元素,1=第二个元素) 否 0 end 最后一个元素(0=第一个元素,1=第二个元素 ...
- FCM算法的matlab程序（初步）
FCM算法的matlab程序 在https://www.cnblogs.com/kailugaji/p/9648430.html文章中已经介绍了FCM算法,现在用matlab程序实现它. 作者:凯鲁嘎 ...
- JavaScript闭包理解【关键字：普通函数、变量访问作用域、闭包、解决获取元素标签索引】
一.闭包(Closure)模糊概述 之前总觉得闭包(Closure)很抽象而且难理解,百度一下"闭包"名词,百度的解释是:“闭包是指可以包含自由(未绑定到特定对象)变量的代 ...
- ansys19.0安装破解教程(图文详解)
ansys19.0是一款非常著名的大型通用有限元分析(FEA)软件.该软件能够与多数计算机辅助设计软件接口,比如Creo, NASTRAN.Algor.I-DEAS.AutoCAD等,并能实现数据的共 ...