2014-12-03 3 views
0

나는 어떤 사람이 내가 입력 한 후 여기에 검색 상자에 편지를 제안을 강조하기 위해 노력하고 도와 수 있기를 바랍니다 코드입니다 : 그들은 현재 상황 작동검색 상자 강조 필드

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

되고 그것은 그 자동 검색 상자의 모든 필드 만 강조 표시합니다.

답변

0

JSFiddle을 제공 할 수 있다면 더 좋을 것입니다.

"searchbox"는 입력 된 것으로 추측합니다. 사용자가 "searchbox"에서 입력을 변경할 때마다 "출력"을 강조하고 싶습니까?
JS :

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

변화 :

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

CSS :

는 그렇다면, 다음이 내 제안이다이 부분

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

     } 
에게 추가