自定义搜索栏

Question

如果你看看谷歌，他们的搜索栏上有一些很棒的功能，但我想知道是否有人能指出我复制其中一些功能的方向？

例：

我们想在输入字段的搜索框末尾添加X，向右浮动。 虽然不知道如何做到这一点，但我认为css是直接的，但在脚本编写时不确定如何在不刷新页面的情况下执行此操作。

请任何想法。

我们的搜索框是自动建议，代码不是真正需要（html）显示在这里，但可以发布，如果人们需要看到我们的简单代码。 此外，想知道是否有人在输入字段中实际添加了类似于该图像的清晰结果X ....

或者发布一些链接..这里的bugger它是我们的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-->

Answer 1

如果您使用例如firebug检查Google页面的来源，您将看到x不是输入字段的一部分，它是包含在下一个表列中的链接标记中的x （输入放在上一列中以及其他一些东西）。

只需在链接标记中添加一些javascript即可清除输入并取消它的标准操作，您将获得全部效果。

Answer 2

尝试这个：

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

Answer 3

$().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();
    });
});

看看这个jsfiddle