Я предположу, что при высказывании "веб-сервисов" Вы имеете в виду SOAP и WS -* набор стандартов. (Иначе я мог утверждать, что сервисы REST "веб-сервисы".)
канонический аргумент - то, что сервисы REST являются более близким соответствием к дизайну сети - то есть, дизайну HTTP и связанной инфраструктуры. Таким образом использование сервиса REST будет более совместимо с существующими веб-инструментами и методами.
, Конечно, как только Вы развертываете в специфические особенности, Вы узнаете, что оба подхода имеют преимущества в различных сценариях. Это - те специфические особенности, которыми Вы интересуетесь?
Этот конкретный тип автозаполнения не поддерживается в популярных плагинах автозаполнения (для jQuery, Scripty ...), потому что обычно они предоставляют раскрывающийся пользовательский интерфейс для выбора желаемого соответствия.
Итак, давайте предположим, что у нас нет готового решения. Бу-хо. Насколько сложно это кодировать?
// takes a text field and an array of strings for autocompletion
function autocomplete(input, data) {
if (input.value.length == input.selectionStart && input.value.length == input.selectionEnd) {
var candidates = []
// filter data to find only strings that start with existing value
for (var i=0; i < data.length; i++) {
if (data[i].indexOf(input.value) == 0 && data[i].length > input.value.length)
candidates.push(data[i])
}
if (candidates.length > 0) {
// some candidates for autocompletion are found
if (candidates.length == 1) input.value = candidates[0]
else input.value = longestInCommon(candidates, input.value.length)
return true
}
}
return false
}
// finds the longest common substring in the given data set.
// takes an array of strings and a starting index
function longestInCommon(candidates, index) {
var i, ch, memo
do {
memo = null
for (i=0; i < candidates.length; i++) {
ch = candidates[i].charAt(index)
if (!ch) break
if (!memo) memo = ch
else if (ch != memo) break
}
} while (i == candidates.length && ++index)
return candidates[0].slice(0, index)
}
Тестовая страница здесь - она должна работать в обычных браузерах. Для поддержки IE используйте прослушивание событий из prototype.js, jQuery или других.
Если вы используете jQuery, отличный плагин - http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ . Просто используйте css, чтобы скрыть раскрывающийся список, и оставьте функцию автозаполнения табуляции включенной.
Я думаю, что было бы просто создать плагин jquery для себя ...
Вдоль строк Слушайте клавишу Tab Когда нажата клавиша табуляции, запускается вкладка: нажмите на input.autotab
$(document).keydown(function(e){ if (e.keyCode = (tab-key?)){
$('input.autotab').trigger('tab:press');
});
Свяжите вкладку input.autotab: нажмите событие (в каждом цикле ... если focus == true и т. Д.) Либо с поиском в массиве javascript, либо запрос xhr (ajax), затем установите это входное значение в качестве возвращаемых данных.
$('input.autotab').bind('tab:press', function(){
if (this.hasFocus){
this.disabled = true;
$.get('/autotab', { q: $(this).val() }, function(response){
$(this).val(response);
this.disabled = false;
}, function(){ this.disabled = false; });
}
});
В сценарии автозаполнения запишите его так, чтобы значение совпадало более одного раза в базе данных (используйте цикл for с индексом, остановив в элементе индекса, где соответствует первый элемент), и вернуть значение до этой точки.
The simplest way would be to just use the jQuery and the autocomplete plugin. Looking the the stackoverflow html, it seems that they are using the same stuff. Seems to work very well for most browsers. The plugin also has an extensive demo that should help you figure out how to implement it to your specific needs.
Here's a quick sample from the plugin home page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
</head>
<body>
API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>
More to be found here http://docs.jquery.com/Plugins/Autocomplete