2011-07-20 4 views
0

これは可能ですか?単語をクリックするとAJAXオプションボックスが表示されますか?

"I entered home" 
     |garden| 
     | motel| 
     |______| 

私のため申し訳ありません:私は「ホーム」をクリックしたときに

を「私は家に行ってきました」その後、オプションボックスは次のように現れる:私は、テキストボックスにこのフレーズが持っているようにそれを見せつける醜い方法は、何かについてもっとよく考えることができませんでした。

答えて

0
<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $("#fieldName").focus(function(){ 
     var el = $(this); 
     var coords = el.offset(); 
     var div = $("<div>").addClass("dropdown").html("<span>garden</span><span>motel</span>").css({"top":coords.top+18+"px","left":coords.left+45+"px"}); 
     el.after(div); 
     $(".dropdown span").click(function(){ 
      var newText = "I entered the " + $(this).text(); 
      $("#fieldName").val(newText); 
      $("div.dropdown").remove(); 
     }); 
    }); 
}); 
</script> 
<style> 
    .text {width:120px;} 
    .dropdown {width:75px; text-align:right; position:absolute; padding:2px; background:#eee; border:1px solid #aaa;} 
    .dropdown span {display:block; cursor:pointer;} 
</style> 
</head> 
<body> 
<input type="text" class="text" name="fieldName" id="fieldName" value="I entered the home" /> 
</body> 
</html> 

あなたはjのコピーが必要ですこれが機能するには、クエリ(またはGoogleのCDNをポイント)を使用します。この例は非常に原始的ですが、うまくいけば、どこに行きたいのかが分かるでしょう。

関連する問題