希望有人能对我有所帮助,在搜索框中输入字母后,我想突出显示这些建议,代码如下:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="javascripts/jquery-ui-1.11.0.custom/external/jquery/jquery.js"></script>
<script type="text/javascript" enter code heresrc="javascripts/jquery-ui-1.11.0.custom/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="javascripts/jquery-ui-1.11.0.custom/jquery- ui.css">
<script type="text/javascript" src="jquerysearch.js"></script>
<script type="text/javascript">
            //Communication to PHP file and server
            function searchq() {
                var searchTxt = $("#searchbox").val();
                $(function() {
                    $("#searchbox").autocomplete({
                        appendTo: function(request, response) {
                            $.post("tagasearch4.php", {
                                searchVal: searchTxt
                            }, function(output) {
                                $("#output").html(output);
                                var myFunction = function(i) {
                                    $(this).attr('tabindex', i - 0)
                                };
                                $("li").each(myFunction)
                                $('li').addClass('selected');
                                $('input').addClass('menu');
                            });
                        }
                    });
                });
                $("#searchbox").keypress(function() {
                    $("#output").css("border-style", "inset");
                });
            };
            //Adding custom effects to List
            $("table").mouseover(function() {
                $("table").css("paddingLeft", "60px");
            });
            $("li").mouseout(function() {
                $("li").css("background-color", "white");
            });
            //Adding custom effects to SearchBox
            $(function() {
                $('#searchbox').click(function() {
                    $(this).effect('highlight')
                });
            });
        </script>
<style type="text/css">
            th {
                border-color: skyblue;
            }
            th {
                text-align: center;
            }
            th {
                border-radius: 7%;
            }
            table {
                padding-left: 60px;
            }
            nav ul li:hover {
                background: blue;
            }
            nav ul li {
                cursor: pointer;
            }
</style>
</head>
<body>
<form method="post" action="" class="searchbox" autocomplete="off">
    <label for="search">Member:</label>
    <input name="searchbox" type="text" onkeydown="searchq()" placeholder="SEARCH" id="searchbox" size="40" maxlength="70"/>
    <nav role="navigation">
    <ul style="list-style-type: none" id="list" type="text">
        <li id="output"></li>
    </ul>
    </nav>
</form>
</body>
</html>


它们现在起作用的方式是,它仅突出显示自动提示框中的所有字段。

最佳答案

如果您可以给出JSFiddle,那会更好。

我想“搜索框”是输入字段,每当用户在“搜索框”中更改输入时,是否要突出显示“输出”?

如果是这样,那么这是我的建议:

JS:

        $("#searchbox").keypress(function() {
            $("#output").css("border-style", "inset");
        });


改成:

    $("#searchbox").change(function() {
        $("#output").addClass("highlight");
    });


CSS:添加此部分

        .highlight{
            border: red;
            background-color: yellow;

        }

关于jquery - 搜索框突出显示字段,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27280609/

10-12 13:28