我有一个段落,我正在拆分文本并创建一个数组,稍后将其传递给jQuery自动完成。它工作正常,但我想要的是,一旦我选择一个单词并按下空格键,应该通过自动完成建议所选单词的下一个单词或(单词)。有可能吗?
这是我目前的代码:
var curDocParaText = $('.docTextFull').text();
var docWords = curDocParaText.replace(/\s{2,}/g, ' ').split(" ");
$( "#parameter" ).autocomplete({
source: function(req, responseFn) {
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp( "^" + re, "i" );
var a = $.grep( docWords, function(item,index){
return matcher.test(item);
});
responseFn( a );
}
});
这是有效的,但我不知道接下来要做什么来实现我想要的。任何建议都会受到欢迎。
答案 0 :(得分:0)
您可以将任何字词添加到自动填充建议中,方法是将它们推送到建议数组(代码中为a
)。所以你需要做的是:
#parameter
输入中获取最后一个字。docWords
)。一个简单的演示将是这样的(将在responseFn( a );
部分之前添加到您的函数中):
// get the value in the input
var textValue = $("#parameter").val();
// if the last character is a space
if (textValue.slice(-1) == " ") {
// get the last word in the sentence
var start = textValue.lastIndexOf(" ", textValue.length-2);
var lastWord = textValue.substring(start + 1, textValue.length-1);
// check if the word is in the source list
var pos = docWords.indexOf(lastWord);
if (lastWord != " " && docWords.length > pos) {
// if it is, suggest the next word too as a sentence
a.push($("#parameter").val() +docWords[pos+1]);
}
}
请注意,这是一个非常基本的示例,它不检查单词重复,大小写或其他任何内容。您需要扩展它以使其更“完整”并根据您的需要进行调整。
这是一个正在运行的演示:
var curDocParaText = $('.docTextFull').text();
var docWords = curDocParaText.replace(/\s{2,}/g, ' ').split(" ");
$( "#parameter" ).autocomplete({
source: function(req, responseFn) {
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp( "^" + re, "i" );
var a = $.grep( docWords, function(item,index){
return matcher.test(item);
});
var textValue = $("#parameter").val();
if (textValue.slice(-1) == " ") {
var start = textValue.lastIndexOf(" ", textValue.length-2);
var lastWord = textValue.substring(start + 1, textValue.length-1);
var pos = docWords.indexOf(lastWord);
if (lastWord != " " && docWords.length > pos) {
a.push($("#parameter").val() +docWords[pos+1]);
}
}
responseFn( a );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div><b>Demo Sentence:</b></div>
<div class="docTextFull">"The quick brown fox jumps over the lazy dog"</div>
<hr/>
<input type="text" id="parameter">