Question

我希望有人可以帮助我，我想在搜索框中输入一封信后突出显示建议，这里是代码：

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

它们现在的工作方式是它只突出显示自动提示框中的所有字段。

Answer 1

如果你能给出一个JSFiddle会更好。

我猜＆＃34;搜索框＆＃34;是输入字段，只要用户在＆＃34; searchbox＆＃34;中更改输入，您就要突出显示＆＃34;输出＆＃34;？

如果是这样，那么这是我的建议：
JS：

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

更改为：

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

CSS：添加此部分

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

        }

搜索框突出显示字段

1 个答案: