单词作为自动完成的组合建议一旦选择该单词

时间:2015-07-24 13:05:36

标签: javascript jquery autocomplete

我有一个段落,我正在拆分文本并创建一个数组,稍后将其传递给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 );
            }
});

这是有效的,但我不知道接下来要做什么来实现我想要的。任何建议都会受到欢迎。

1 个答案:

答案 0 :(得分:0)

您可以将任何字词添加到自动填充建议中,方法是将它们推送到建议数组(代码中为a)。所以你需要做的是:

  1. 检查最后一个字符是否为空格。
  2. 如果是,请从#parameter输入中获取最后一个字。
  3. 在您用作来源的单词列表中搜索该单词(docWords)。
  4. 如果它在源中,请在建议中添加下一个单词。
  5. 一个简单的演示将是这样的(将在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">