Home/ Questions/Q 6046491
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T07:14:45+00:00

here is the code……… <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml>

  • 0

here is the code………

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>search</title>

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
    function lookup(inputString) {
        if(inputString.length == 0) {
            $('#suggestions').hide();
        } else {
            $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    }

    function fill(thisValue) {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }
</script>

<style type="text/css">
    body {
        font-family: Helvetica;
        font-size: 11px;
        color: #000;
    }

    h3 {
        margin: 0px;
        padding: 0px;   
    }

    .suggestionsBox {
        position: relative;
        left: 30px;
        margin: 10px 0px 0px 0px;
        width: 200px;
        background-color: #212427;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000; 
        color: #fff;
    }

    .suggestionList {
        margin: 0px;
        padding: 0px;
    }

    .suggestionList li {

        margin: 0px 0px 3px 0px;
        padding: 3px;
        cursor: pointer;
    }

    .suggestionList li:hover {
        background-color: #659CD8;
    }
</style>

</head>

<body>

    <div>
        <form>
            <div>
                Type the Product name:
                <br />
                <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
            </div>

            <div class="suggestionsBox" id="suggestions" style="display: none;">
                <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                <div class="suggestionList" id="autoSuggestionsList">
                    &nbsp;
                </div>
            </div>
        </form>
    </div>

</body>
</html>

on running this code. a textbox displays. when we type the suggestion displays and we can select the correct suggestion . but when we click the suggestion the suggestion is loaded as plain text. eg. when we type “b” in text box it displays “browsers and so on”. when we click browser it updates in textbox as plain text. i need that to be in a box… as in stackoverflow we “tag” option like c it appears like a box . i need to do like that ?? how to implement that???

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    it displays as plain text because that’s what you’re adding:

    $('#autoSuggestionsList').html(data);

    add a styled element instead:

    $('#autoSuggestionsList').append($('<span />')
    .html(data)
    .addClass('suggestion')
        .append($('<button />')
            .html('close')
            .click(function () {
                $(this).closest('suggestion').remove();
            })
        )
    )

    css:

    .suggestion { display:block-inline; border:1px solid black; padding:2px 5px; }
    • 0