Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2009
    Location
    Moore, OK
    Posts
    282
    Thanks
    11
    Thanked 41 Times in 41 Posts

    jQuery hide element when something else is focused in on.

    What I am trying to do is get a select box for possible options... Much like you see on facebook when you search for a friend. If you select one of the options an action happens and if you select outside of the box or tab else where it closes. I can seem to do one or the other but not both. The options are filled in via AJAX and JSON. Here is a sample of my code.

    Code:
    <script type="text/javascript" src="jquery.js"></script>
    <script>
    $(document).ready(function(){
      suggestions.hide();
      // On the change of the id_location text search for matching results.
      $('#text').keyup(function(){
        // Get the value of the id location.
        var text = $('#text').val();
        // Trim any unnecessary white spaces.
        text = jQuery.trim(text);
        // Start guessing after the length of text if greater than one.
        if (text.length > 1) {
          // Create a query string for ajax.
          var qry_str = '?suggestion=' + text;
          // Send an ajax json request.
          $.getJSON('http://example.com/page.html' + qry_str, function(data){
            // Empty the suggestions box.
            $('#suggestions').empty();
            // Show the suggestions box.
            $('#suggestions').show();
            if (data.length > 1) {
              // Start a list for the suggestion.
              $('#suggestions').append('<ul class="suggestion_list"></ul>');
              // Loop through all the results.
              for (i = 1; i < data.length; i++) {
              // Get the name.
              $('#suggestions ul').append('<li id="suggestion_' + data[i].id + '" class="suggestion suggestions">' + data[i].name + '</li>');
            }
            // If an id selection was made then place its complete text in the box and its id in the id location box.
            $('.suggestion').click(function(){
              // Get the id from the substring of the html id.
              var html_id = $(this).attr("id");
              var id = html_id.substring(11);
              // Get the name from the text.
              var name = $(this).html();
              // Alert just to test if you have the id.
              alert(id);
              // Set the value of the text box to the complete name.
              $('#text').val(name);
              // Hide and empty the suggestion box.
              $('#suggestions').hide();
              // Turn the focus back to the text.
              $('#text').focus();
            });
    /*  This is the part that messes up the suggestion click function if turned on. */
            // Hide the box when focus is else where.
            $('#container').focusout(function(){
              alert('test');
    //		  $('#suggestions').hide();
            });
          });
        }
      });
    });
    </script>
    <div id="container">
      <input type="text" id="text" name="text" value="">
      <div id="suggestions">
        <ul class="suggestion_list">
          <li id="suggestion_1" class="suggestion">Option 1</li>
          <li id="suggestion_2" class="suggestion">Option 2</li>
          <li id="suggestion_3" class="suggestion">Option 3</li>
          <li id="suggestion_4" class="suggestion">Option 4</li>
        </ul>
      </div>
    </div>
    The main thing is to make them click an option or hide the list if anything outside the container is clicked on or tabbed to. Is there any vent better than the focus out statement or be able to select all elements not in the container and set a focus() function on them (without having to individually name all the elements)? Thanks for any help.
    Last edited by Coyote6; 06-21-2010 at 04:56 PM. Reason: Left bad ids and function name in javascript section.

  • #2
    Regular Coder
    Join Date
    May 2009
    Location
    Moore, OK
    Posts
    282
    Thanks
    11
    Thanked 41 Times in 41 Posts
    Here's a simplified version of the problem.
    Code:
    <script type="text/javascript" src="jquery.js"></script>
    <script>
    $(document).ready(function(){
    	// Hide the suggestion.
    	$('#suggestions').hide();
    	// On the change of the id_location text search for matching results.
    	$('#text').keyup(function(){
    		$('#suggestions').show();	
    		// If an id selection was made then place its complete text in the box and its id in the id location box.
    		$('.suggestion').click(function(){
    			// Get the id from the substring of the html id.
    			var html_id = $(this).attr("id");
    			var id = html_id.substring(11);
    			// Get the name from the text.
    			var name = $(this).html();
    			// Set the value of the text box to the complete name.
    			$('#text').val(name);
    			// Hide and empty the suggestion box.
    			$('#suggestions').hide();
    			// Turn the focus back to the text.
    			$('#text').focus();
    		});
    		/*  This is the part that messes up the suggestion click function if turned on. */
    		// Hide the box when focus is else where.
    		$('#container').focusout(function(){
    			alert('test');
    			$('#suggestions').hide();
    		});
    	});
    });
    </script>
    <div id="container">
      <input type="text" id="text" name="text" value="">
      <div id="suggestions">
        <ul class="suggestion_list">
          <li id="suggestion_1" class="suggestion">Option 1</li>
          <li id="suggestion_2" class="suggestion">Option 2</li>
          <li id="suggestion_3" class="suggestion">Option 3</li>
          <li id="suggestion_4" class="suggestion">Option 4</li>
        </ul>
      </div>
    </div>

  • #3
    Regular Coder
    Join Date
    May 2009
    Location
    Moore, OK
    Posts
    282
    Thanks
    11
    Thanked 41 Times in 41 Posts
    Solved the issue using a setTimeout on the focusout() function. Silly thing is I tried this method earlier and it didn't work because of a stupid syntax error.

    Code:
    		$('#container').focusout(function(){
    			setTimeout(
    				function(){
    					$('#suggestions').hide();
    				},
    				500
    			);
    		});


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •