customizing our search bar_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-05 11:09 出处：网络

If you check out google, they have some excellent features on their search bar, but I wondered if anyone could point me in the direction to replicate some of these features ?

Example:

customizing our search bar

We would like to add the X at the end of the search box in the input field, float right. Not sure though how this is done, I presume the css is straightfoward, but not sure on the scripting to do this without refreshing the page.

Any ideas please.

Our search box is auto suggest, code isnt really necessary ( html ) to display here, but can post if people need to see our simple code. Moreover wondered if anyone had actually added a clear results X within the开发者_JAVA技巧 input field similar to that image....

Or post some links please.. bugger it here is our html.

<input name="suburbs" id="suburbs" type="text" placeholder="eg: Apples" onkeyup="lookup(this.value);" onblur="fill();" autocomplete="off" /></input>
                            <!--added autosuggest-->
                                <div class="suggestionsBox" id="suggestions" style="display: none;">
                                    <div class="suggestionList" id="autoSuggestionsList">
                                        &nbsp;
                                    </div>
                                </div>
                            <!--//auto suggest end-->

If you check the source of the Google page using for example firebug, you will see that the x is not part of the input field, it's an x wrapped in a link tag in the next table column (the input is put in the previous column along with some other stuff).

Just add some javascript to the link tag to clear the input and cancel it's standard action and you have the whole effect.

Try this:

    <head>
    <title>Untitled Page</title>
    <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $('#searchBar span').click(function () {
                $('#searchBar input[type=text]').val('');
            });

        });

    </script>

    <style type="text/css">
        input[type=text]
        {
            border:solid 1px #ccc;
            width:400px;
            padding:5px;
            padding-right:25px;
            }

         #searchBar span 
         {
             margin-left:-25px;
             margin-right:10px;
             font-family:Arial;
             color:blue;
             cursor:pointer;
             zoom:1;
             }
    </style>
</head>
<body>
    <div id="searchBar">
        <input type="text" />
        <span title="Clear search">X</span>
        <input type="button" value="search" />
    </div>
</body>
</html>

$().ready(function() {
    // if text input field value is not empty show the "X" button
    $("#field").keyup(function() {
        $("#x").fadeIn();
        if ($.trim($("#field").val()) == "") {
            $("#x").fadeOut();
        }
    });
    // on click of "X", delete input field value and hide "X"
    $("#x").click(function() {
        $("#field").val("");
        $(this).hide();
    });
});

Check out this jsfiddle