如何仅在onmouseover上触发AJAX请求

I have below script which shows values from search page onmouseover.

<script type="text/javascript">
    function preview(val) {
      $.ajax({
        type: "POST",
        url: "search.php",
        data:'id='+val,
        success: function(data){
            $(".ress").html(data);
        }
    });
   }
 </script>

html :

<div class="CVSearchResult" onmouseover="preview('1')">

search :

<?php echo $_POST['id']; ?> 

output for class .ress :

1

However I want to hide the output onmouseout as well. How can I do this? I mean just trigger the AJAX for mouse hover and hide if not hover.

<div class="CVSearchResult" onmouseover="preview('1')" onmouseout="hide()">
<script>
function hide() {
    $(".ress").html('');
} 
</script>

You are adding event handler when user move the mouse away from the element to trigger hide function.

The hude function grab the result dom element(which can contain selected results from previous calls) and set the html to empty string.

That way when you move away with the mouse the div element is cleared.

Well I made a little fiddle instead to show how you could do it.

Fiddle with it

HTML

<div class="CVSearchResult" data-mydata="1">
  HOVER ON ME1
</div>
<div class="ress">
  This was hidden but is now visible.1
</div>

JS

$(document).ready(function() {
  $(".CVSearchResult").on("mouseover", function() {
    preview($(this).attr("data-mydata"));
  });
  $(".CVSearchResult").on("mouseout", function() {
    $(".ress").css("display", "none");
  })
})
function preview(val) {
  $(".ress").css("border", "2px solid black");
    /* Add your own ajax call here to get the data that you want... */
  var data = val;
  $(".ress").html(data);
  $("div.ress").css("display", "block");
    /* --- */
}

CSS

.ress {
  display: none;
  border: 1px solid black;
  font-family: Helvetica;
  position: absolute;
  left: 200px;
  top: 10px;
  padding: 5px;
}