AJAX options box when clicking on a word?_问答_开发者

AJAX options box when clicking on a word?

开发者 https://www.devze.com 2023-03-22 06:16 出处：网络

Is this possible ? like I have this phrase on a textbox: \"I went home\" then when I click \"home\" an options box shows up like:

Is this possible ? like I have this phrase on a textbox:

"I went home"

then when I click "home" an options box shows up like:

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

sorry for my ugly way to show it, coul开发者_如何转开发dn't think about anything better lol

<!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>

You'll need a copy of jquery (or point to Google's CDN of it) for this to work. This example's pretty primitive, but hopefully it'll get you where you want to go.