搜索框突出領域

我希望有人能幫助我，我想以後我輸入突出的建議在這裏搜索框中輸入字母的代碼是：搜索框突出領域

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

他們它的工作方式，現在是它只會突出顯示自動提示框中的所有字段。

來源

2014-12-03 TAG

如果你可以給出一個JSFiddle會更好。

我猜「searchbox」是輸入字段，每當用戶在「searchbox」中更改輸入時，想突出顯示「output」？

如果是這樣，那麼這是我的建議：
JS：

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

變化：

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

CSS：添加此部分

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

     }

來源

2014-12-04 02:58:21

搜索框突出領域

回答

相關問題