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

    Join Date
    Nov 2013
    Posts
    58
    Rep Power
    1

    Trying to wrap my head around jquery autocomplete


    After a ton of Google searching, I've finally come up with a semi-working autocomplete with jquery.

    This is my header
    Code:
    <script type="text/javascript">
                    $(document).ready(function(){
                   	$("#college_names").autocomplete({
    		source:'search_colleges_autocomplete.php',
                            minLength:2
    				    });
    					$("input:text:visible:first").focus();
                    });
            </script>
    This is the form part:
    Code:
    <form method="post" name="search_colleges_autocomplete" action="">
                 <p><strong>College</strong>: <input type="text" id="college_names" name="college_names" placeholder="College or University Name" size="50" />
    and this is the php file that brings back the search information:
    PHP Code:
    if (isset($_GET['term'])){
            
    $stmt=mysqli_prepare($dbc"SELECT college_id, nick_name, college_name FROM colleges WHERE (college_name LIKE ?) OR (nick_name LIKE ?)");
            
    $search_term='%' $_GET['term'] . '%';
            
    mysqli_stmt_bind_param($stmt'ss'$search_term$search_term);
            
    mysqli_stmt_execute($stmt);
            
    mysqli_stmt_bind_result($stmt$college_id$nick_name$college_name);
            
    $json=array();
            while(
    mysqli_stmt_fetch($stmt)){
                
    // Display a different JSON array depending on whether there is a nickname/former name or not
                // If there is a nick name, display it, at least for the label
                
    if($nick_name==''){
                
    $json[]=array(
                    
    'value'=>$college_name,
                    
    'label'=>$nick_name ' (' $college_name ')',
                    
    'id'=>$college_id
                    
    );
                
    // If there is no nick name, just the college name
                    
    } else {
                
    $json[]=array(
                    
    'value'=>$college_name,
                    
    'label'=>$college_name,
                    
    'id'=>$college_id
                    
    );
                    }
                }
            echo 
    json_encode($json);

    So it works, in the sense that it searches in real time and matches, but what I want it to do is display the result but actually hide and temporarily store the id as part of the form for processing. Otherwise, I'll have to look up the submitted text again to find the ID, which is like a double lookup.

    Any help is much appreciated. Thanks!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,123
    Rep Power
    119
    You could create a hidden text field and just remove the college id from your "#college_name" field or manipulate the "source" option, by removing the id of the college (using a split() or a regular expression) and inserting the removed text (the college's id) by setting/updating/appending (depending on how many college ids you want to store) the value of the hidden text field.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    58
    Rep Power
    1
    Thanks, web_loone08, but a lot of what you're saying is a little too sophisticated for me. I'm okay on PHP, but I'm very much a beginner when it comes to JavaScript or JQuery.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,123
    Rep Power
    119
    To do what your wanting to do; your going to have to have a better understanding of JavaScript/jQuery; unless you just move away from AJAX (which the jQuery autocomplete() API is using) and just go with PHP, sessions, and normal html form submission.

    jQuery was created to make the developer's life much easier, but at some point..., the developer has to learn how the jQuery library/plug-in/APIs work. So, my suggestion would be for you to visit the jQuery website and read up on the documentation applicable to the autocomplete() API; but not just that..., you should especially read up on the documentation of the implementation and basic usages of jQuery.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    58
    Rep Power
    1
    If someone has something more helpful to offer than RTFM, I'm still open to tweaks or explanations that point me in the right direction. I have read the documentation on JQuery... it hasn't been very helpful. It assumes too much.

IMN logo majestic logo threadwatch logo seochat tools logo