#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    251
    Rep Power
    17

    Reusing javascript for a live search on multiple fields


    Hi,

    I have a function that calls a back-end php script to do a live search on the db (mysql). It works great on the one field, but now I need to get it to work on other html fields. I essentially want to reuse this function, but I am unsure whether I can or whether I need to repeat this function for each field with a different name?

    Javascript
    Code:
    $(document).ready(function(){
        $('.search-box1 input[type="text"]').on("keyup input", function(){
            /* Get input value on change */
            var inputVal = $(this).val();
            var resultDropdown = $(this).siblings(".result1");
            if(inputVal.length){
                $.get("../../includes/duty_search.php", {term: inputVal}).done(function(data){
                    // Display the returned data in browser
                    resultDropdown.html(data);
                });
            } else{
                resultDropdown.empty();
            }
        });
        
        // Set search input value on click of result item
        $(document).on("click", ".result1 p", function(){
            $(this).parents(".search-box1").find('input[type="text"]').val($(this).text());
            $(this).parent(".result1").empty();
        });
    });
    HTML
    Code:
                <div class="search-box1">
    
                <input type="text" class="form-control" name="ability1" placeholder="Ability1" value="<?php if (isset($ability1)){echo $ability1;}?>" />
    
                <div class="result1"></div>
    I will then have this html again as field search box 2, I could rename the divs to different search box and result?:

    Code:
                <div class="search-box1">
    
                <input type="text" class="form-control" name="ability1" placeholder="Ability2" value="<?php if (isset($ability2)){echo $ability2;}?>" />
    
                <div class="result1"></div>
    Thanks!
  2. #2
  3. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,905
    Rep Power
    9646
    As long as the Javascript is not written to work for a particular element on the page, and instead gets everything it needs from the element invoking it (directly or indirectly), then it should work. So it can't get anything on the page unless it does so relative to the caller - no $("#id") or $(".class") but something using $(this).

    Which is what it does.

    So I don't see any reason why it would not work.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    251
    Rep Power
    17
    Thanks for the reply, perhaps I should elaborate on what I have today in terms of javascript:

    Code:
    $(document).ready(function(){
        $('.search-box1 input[type="text"]').on("keyup input", function(){
            /* Get input value on change */
            var inputVal = $(this).val();
            var resultDropdown = $(this).siblings(".result1");
            if(inputVal.length){
                $.get("../../includes/component_search.php", {term: inputVal}).done(function(data){
                    // Display the returned data in browser
                    resultDropdown.html(data);
                });
            } else{
                resultDropdown.empty();
            }
        });
        
    
        // Set search input value on click of result item
        $(document).on("click", ".result1 p", function(){
            $(this).parents(".search-box1").find('input[type="text"]').val($(this).text());
            $(this).parent(".result1").empty();
        });
        
    
        
    //});
    
    
    //$("search-box2").ready(function(){
        $('.search-box2 input[type="text"]').on("keyup input", function(){
            /* Get input value on change */
            var inputVal = $(this).val();
            var resultDropdown = $(this).siblings(".result2");
            if(inputVal.length){
                $.get("../../includes/component_search.php", {term: inputVal}).done(function(data){
                    // Display the returned data in browser
                    resultDropdown.html(data);
                });
            } else{
                resultDropdown.empty();
            }
        });
        
        // Set search input value on click of result item
        $("#search-box2").on("click", ".result2 p", function(){
            $(this).parents(".search-box2").find('input[type="text"]').val($(this).text());
            $(this).parent(".result2").empty();
        });
    });
    Then in the html I have this:
    Code:
      <div class="search-box1">
    
                <input type="text" class="form-control" name="ability1" placeholder="Ability1" value="<?php if (isset($ability1)){echo $ability1;}?>" />
    
                <div class="result1"></div>
                </div>
                <br/>
                <p>AND</p>
                <div class="search-box2">   
                
                <input type="text" class="form-control" name="ability2" placeholder="Ability2" value="<?php if (isset($ability2)){echo $ability2;}?>" />
                   
                </div>    
                <div class="result2"></div>
    From what I understand from above, I have one function that repeats functionality given the div class. In my head this should work but alas I am missing something.
  6. #4
  7. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,905
    Rep Power
    9646
    Yeah, that's not quite the same thing.

    The problem is the HTML for the second one is messed up. Take another look at it.

    But you can clean this up a bit. You don't need to duplicate the code.

    1. Change the numbered class names to not be numbered anymore. So you can reuse them without it looking weird. "search-box" and "result" are fine.
    2. Use a search-box as the container for each part that does searching. You're already doing that.
    3. Adjust the code to use the un-numbered class names.

    javascript Code:
    $(document).ready(function(){
    	$('.search-box input[type="text"]').on("keyup input", function(){
    		/* Get input value on change */
    		var inputVal = $(this).val();
    		var resultDropdown = $(this).siblings(".result");
    		if(inputVal.length){
    			$.get("../../includes/component_search.php", {term: inputVal}).done(function(data){
    				// Display the returned data in browser
    				resultDropdown.html(data);
    			});
    		} else{
    			resultDropdown.empty();
    		}
    	});
     
     
    	// Set search input value on click of result item
    	$(document).on("click", ".result p", function(){
    		$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
    		$(this).parent(".result").empty();
    	});
    });

    That can handle all of the search-boxes - if you want to add a third one then you don't have to change it*.

    Code:
    <div class="search-box">
    	<input type="text" class="form-control" name="ability1" placeholder="Ability1" value="<?php if (isset($ability1)){echo $ability1;}?>" />
    	<div class="result"></div>
    </div>
    
    <br/>
    <p>AND</p>
    
    <div class="search-box">
    	<input type="text" class="form-control" name="ability2" placeholder="Ability2" value="<?php if (isset($ability2)){echo $ability2;}?>" />
    	<div class="result"></div>
    </div>
    (* Unless you want to add one using Javascript on the page. Dynamically. Without a page reload. That would require a small bit of tweaking.)

    Comments on this post

    • genista agrees
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    251
    Rep Power
    17
    Thanks you this is the solution! I hope your skills mean you are no longer impoverished!

IMN logo majestic logo threadwatch logo seochat tools logo