jQuery FAQ autosuggest ответ ниже заголовка в соответствии со StackOverflow

Question

Я хочу, чтобы форма поддержки использовала содержимое поля «проблемное название» в качестве триггера, чтобы добавить 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> 

Когда пользователь начинает набирать сводку их задачи ДИВ ниже будет заселить с предложенными ответами.

Answer 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'); 
       } 

      }); 

     } 
    } 

Это было тогда срабатывает с помощью плагина «Тип Watch» для JQuery (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);