根据 StackOverflow，jQuery 常见问题解答在标题下方自动建议答案答案

【问题标题】：jQuery FAQ autosuggest answer below title as per StackOverflow根据 StackOverflow，jQuery 常见问题解答在标题下方自动建议答案
【发布时间】：2013-07-31 15:03:25
【问题描述】：

我想让一个支持表单使用“问题标题”字段的内容作为触发器，在下面添加一个带有可能答案的 div，就像 StackOverflow 在您提交新问题时所做的那样。

为了澄清，我不希望将建议的答案显示为“自动完成”选项，我希望它们作为建议的答案出现在下方。

页面中的标记可能类似于：

<input type="text" value="" placeholder="Your problem in brief">
<div id="PossibleAnswers" class="hidden">
<ul>
    <li><a href="#">Possible answer 1</a></li>
    <li><a href="#">Possible answer 2</a></li>
    <li><a href="#">Possible answer 3</a></li>
</ul>
</div>

当用户开始输入他们的问题摘要时，下面的 div 将填充建议的答案。

【问题讨论】：

标签： jquery autosuggest proactive

【解决方案1】：

我设法启动并运行了一些东西，这就是我最终得到的结果：

var do_live_search = function() {

        var stopwords = new Array("a","about","an","and","are","as","at","be","by","but","can't","from","how","i","in","is","it","of","on","or","that","the","this","to","was","we","what","when","where","which","with","won't");

        var keywords = $("#Trigger").val().split(" ");

        var clean_keywords = new Array();

        $.each(keywords,function(i,val){
            if(($.trim(val) != "")
                && ($.inArray(val,stopwords)==-1)
                && ($.inArray(val,clean_keywords)==-1)
                && (val.length > 3)
                ){
                clean_keywords.push(val);
            }
        });

        if (clean_keywords.length >= 1) {

            var joined_keywords = clean_keywords.join('|');

            $.get("/fetch/_search_support_faqs?q="+joined_keywords+"", function(mydata){

                if (mydata != "") {

                    $.each(mydata, function(i, item) {
                        $('#MatchingFAQs ul').append(
                            $('<li>').append(
                                $('<a>').attr('href','#FAQ_'+mydata[i].entry_id).append(mydata[i].title)
                        )); 
                    });

                    $('#MatchingFAQs').slideDown('slow');
                }

            });

        }
    }

然后使用 jQuery 的“Type Watch”插件 (https://github.com/dennyferra/TypeWatch) 触发：

var typewatch_options = {
        callback:do_live_search,
        wait:500,
        highlight:true,
        captureLength:3
    }

    // Watch for key up events in the search field
    $("input#Trigger").typeWatch(typewatch_options);

【讨论】：