자바스크립트 검색 자동 프롬프트 function_javascript 기술 구현

<script src="jquery-1.2.1.pack.js" type="text/javascript"></script>  
<script type="text/javascript">  
function lookup(inputString) {  
    if(inputString.length == 0) {  
        // Hide the suggestion box.  
        $(‘#suggestions&#39;).hide();  
    } else {  
        $.post("rpc.php", {queryString: ""+inputString+""}, function(data){  
            if(data.length >0) {  
                $(‘#suggestions&#39;).show();  
                $(‘#autoSuggestionsList&#39;).html(data);  
            }  
        });  
    }  
} // lookup  
function fill(thisValue) {  
    $(‘#inputString&#39;).val(thisValue);  
   $(‘#suggestions&#39;).hide();  
}  
</script>

$.post(url, [data], [callback])

// PHP5 Implementation - uses MySQLi.   
$db = new mysqli(‘localhost', ‘root' ,”, ‘autoComplete');  
if(!$db) {  
    // Show error if we cannot connect.  
    echo ‘ERROR: Could not connect to the database.';  
} else {  
    // Is there a posted query string?  
    if(isset($_POST[‘queryString'])) {  
        $queryString = $_POST[‘queryString'];  
        // Is the string length greater than 0?  
        if(strlen($queryString) >0) {  
        // Run the query: We use LIKE ‘$queryString%'  
    // The percentage sign is a wild-card, in my example of countries it works like this…  
        // $queryString = ‘Uni';  
      // Returned data = ‘United States, United Kindom';   
  $query = $db->query("SELECT value FROM countries WHERE value LIKE ‘$queryString%' LIMIT 10");  
        if($query) {  
    // While there are results loop through them - fetching an Object (i like PHP5 btw!).  
        while ($result = $query ->fetch_object()) {  
          // Format the results, im using <li> for the list, you can change it.             
             // The onClick function fills the textbox with the result.  
            echo ‘<li onclick="fill(&#39;‘.$result->value.&#39;‘);">&#39;.$result->value.‘</li>&#39;;  
            }  
        } else {  
            echo ‘ERROR: There was a problem with the query.&#39;;  
        }  
    } else {  
        // Dont do anything.  
    } // There is a queryString.  
} else {  
    echo ‘There should be no direct access to this script!&#39;;  
}  
}  
?>

<style type="text/css">   
.suggestionsBox {      
position: relative;      
left: 30px;      
margin: 10px 0px 0px 0px;      
width: 200px;      
background-color: #212427;      
-moz-border-radius: 7px;      
-webkit-border-radius: 7px;      
border: 2px solid #000;      
color: #fff;  }  
.suggestionList {      
margin: 0px;      
padding: 0px;  }  
.suggestionList li {      
margin: 0px 0px 3px 0px;      
padding: 3px;      
cursor: pointer; 
 }  
 .suggestionList li:hover {      
 background-color: #659CD8; 
  } 
   </style>

<p>  
       <p> 
      Type your county (for the demo): 
<input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" /> 
    </p>      <p class="suggestionsBox" id="suggestions" style="display: none;"> 
      <img src="upArrow.png" style="position: relative; top: -12px; left: 30px" alt="upArrow" /> 
      <p class="suggestionList" id="autoSuggestionsList"> 
</p> 
    </p> 
</p>