貴様が入力しようとしていたのはこの中のどれかじゃ

googleとか検索でよく見かけるようになっているのが、候補リスト
あれっぽいのをjavascriptで実装してみましょう。

さっそく

なんか出てきましたかね。
入力してマッチしたものを絞り込む事もできます
まぁ、ひらがなとカナは区別してあったりするので、もう少し掘り下げる必要はあるのかなと思います
ちなみに、選択してテキストボックスに内容を反映させることもできますが
ただ単純に機能実装してないだけです。
live形式でclickつけてtextぶっこぬいてinputのvalueにブチこんだらいいんじゃないですかね！

実装ソース

$(function(){

  // データは配列でもたせてるとします。
  searchListData = ["-LEGNE- 仇なす剣 光の旋律","?ω?ver!!","2nd SIDE","Absolute NIne","Angel Breeze","Bright Blue","DOKIDOKIリズム","GOIN'!!!","Happy×2 Days","Hotel Moonside","LET'S GO HAPPY!!","Love∞Destiny","M@GIC☆","Memories","Naked Romance","Nation Blue","Never say never","Orange Sapphire","Rockin' Emotion","Romantic Now","S(mile)ING!","Shine!!","Snow Wings","Star!!","TOKIMEKIエスカレート","Trancing Pulse","Tulip","Twilight Sky","We're the friends!","You're stars shine on me","アタシポンコツアンドロイド","アップルパイ・プリンセス","あんずのうた","ヴィーナスシンドローム","エヴリデイドリーム","おねだり Shall We ～？","オルゴールの小箱","お願い！シンデレラ","お散歩カメラ","き・ま・ぐ・れ☆Caf? au lait！","ゴキゲンParty Night","ショコラ・ティアラ","ススメ☆オトメ ～jewel parade～","つぼみ","できたてEvo! Revo! Generation!","とどけ！アイドル","ハイファイ☆デイズ","パステルピンクな恋","ましゅまろ☆キッス","ミツボシ☆☆★","メッセージ","メルヘンデビュー！","花簪 HANAKANZASHI","華蕾夢ミル狂詩曲～魂ノ導～","輝く世界の魔法","咲いてJewel","純情Midnight伝説","生存本能ヴァルキュリア","絶対特権主張しますっ！","熱血乙女A","風色メロディ","夢色ハーモニー","明日また会えるよね","夕映えプレゼント","流れ星キセキ"];
  searchListLength = searchListData.length;

  // リストから抜き出し
  function getList(inputStr)
  {
    if(inputStr == ""){
      inputStr = '.*';
    }
    machTextArr = "";
    regexp = new RegExp(inputStr, 'i');
    for(var i=(searchListLength-1);i>=0;i--)
    {
      if(regexp.test(searchListData[i]))
      {
        machTextArr += '<li>'+searchListData[i]+'</li>';
      }
    }
    return machTextArr;
  }

  // 候補データ表示領域生成
  function searchResult(thisElem,Str){
    elem = $('<div>');
    elem.html('<ul>'+getList(Str)+'</ul>');

    elem.addClass('listBox');
    offset= thisElem.position();
    elem.css({
      'left':offset.left+'px',
      'top':(parseInt(offset.top)+thisElem.outerHeight())+'px',
      'width':thisElem.outerWidth()+'px',
    });
    elem.find('ul').css({
      'width':(parseInt(thisElem.outerWidth())+17)+'px'
    });
    elem.find('ul').children('li').css({
      'width':(parseInt(thisElem.outerWidth()))+'px'
    });
    $('.textList').append(elem);
  }

  // フォーカスしたら出す
  $('#textSearch').on('focus',function(){
    searchResult($(this),'');
  });

  // keyupで出す
  $('#textSearch').on('keyup',function()
  {
    var valD = $(this).val();
    $('.listBox').remove();
    searchResult($(this),valD);
  });

  // フォーカス外れると削除
  $('#textSearch').on('blur',function(){
    $('.listBox').remove();
  });
});

今回はデータをベタで書いてやっていますが、本来ならばデータはapiで取得するのが一般的やと思います。
なので、ajaxを使う必要があると思いますが、その場合の注意点は２つ
ひとつは、通信タイミング。keyupの度にデータ取得してってのは一番リアルタイムで最新な情報が取ってこれますが
場合によってはサーバに負荷がかってしまうので、多用すべきではないのかなと思います。
その場合は、ロード時にその時の最新としてデータを取得し、それを参照するようにするのも良いかもしれません。