自动完成是如何工作的
在我们的 JavaScript 代码开头，我们描述了一个全局变量，用来将用于自动完成的单词保存在一个数组中：var Documents = [];。 函数GetAutocomplete填充了Documents数组。 Autocomplete函数：
| function GetAutocomplete(e) { var searchstring = $('#search').val(); if (searchstring.length > 0) { if (searchstring[searchstring.length - 1] != "*") { searchstring += "*"; } } $.ajax({ type: 'POST', url: 'http://localhost:8001/VisionService.svc/GetDocuments', dataType: 'json', data: JSON.stringify({ search: searchstring, format: 1, forautocomplete: 1}), processData: true, async: false, contentType: "application/json ; charset=utf-8", success: function (json, textStatus) { Documents = JSON.parse(json); }, error: function (xhr, textStatus, errorThrown) { alert('An error occurred! ' + (errorThrown ? errorThrown : xhr.status) + " xhr: " + xhr + " textStatus: " + textStatus); } }); } |
这看起来非常像GetDocuments函数。success 函数只是更新了Documents变量，通过JSON.parse来将Webservice的输出进行转换。注意async: false，这使得调用是异步的。这个自动完成插件会调用GetAutocomplete函数，并立即显示Documents。
在 $(document).ready(function () 中初始化自动完成插件:
| $("#search").autocomplete({ source: function (request, callback) { GetAutocomplete(); callback(Documents); }, open: function (event) { var $ul = $(this).autocomplete("widget"); } }); |
你可以在这里找到关于自动完成的信息：自动完成。
在搜索框中处理 [RETURN] 键：
| $('#search').bind("keydown", GetInput); function GetInput(e) { if (e.keyCode == 13) { e.preventDefault(); GetDocuments(e); $('#search').autocomplete("close"); } } |
e.preventDefault();停止了对当前事件的处理。
调试
你可以在web浏览器中输入 URL http://localhost:8001/VisionService.svc。如果服务激活失败，将会有一条信息提示，例如 VisionDAL.dll 无法加载。你可以用像Fiddler 之类的工具检测其间的http通信。
