• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Creating an auto-suggest field with jQuery

#31
[eluser]Mike DeFelice[/eluser]
Missing on small step!

When you click on your drop down you need to let it know to fill your form with that value, there is probably a nicer way then what it down below, but it does the job.

I tried to attach a file because the forum is cleaning out the javascript of the code but I keep getting invalid MIME type.

Where you have

Code:
echo '<li>'.$row[english].'</li>';

you need to add inside your <li>

Code:
onClick="fill(\''.$row[english].\'')"

#32
[eluser]hi8is[/eluser]
First off - thanks for helping out. =)
I'm pretty new to php and mysql but am doing my best.

Here is the line I added:
echo '<li>'.$row[english].'</li>';

No luck thou =(

When I use firebug to investigate the action when clicking on a line item - it gives me the following(see screenshot at this url):
https://skitch.com/trevorcaesar/rpd58/car-parts-now

Again - the page in question is: http://www.car-parts-now.info/aman/index2.php

Thanks again for the help everyone and anyone - this is important to me and i appreciate it greatly.

#33
[eluser]Mike DeFelice[/eluser]
I checked out the site and the following worked.

You need a single quote around the list item you want

fill('Car Item')

and it fixed it when I tried your site.

#34
[eluser]hi8is[/eluser]
Thanks a ton Mike - maybe that will give the original poster some insight too. =)

You the man - man!

#35
[eluser]Mike DeFelice[/eluser]
No problem at all, glad I could help.

#36
[eluser]defectivereject[/eluser]
Not sure if you fixed it, but this works a treat for me, courtesy of IBM CI tutorials

Controller
Code:
public function skillsuggest() {
//INput string passed by jQuery from user input
        $str = addslashes($_POST['str']);
    
//the following is the database query, checking the above inputted string from the input box
        $skills_query = $this->mtest->find_qualheld($str);
    
//This is the returned data from the above database query, set into a UL appearing directly under the input box.
        echo "<ul>";
        foreach ($skills_query->result() as $activity) {
          echo '<li>qualification).'\',' . $activity->q_id.');">' . $activity->qualification . "</li>";
        }
        echo "</ul>";
      }

Model
Code:
function find_qualheld($str) {
            
            $this->db->select('add your fields here');
            $this->db->from('table here');

//join several tables to check against if need be
            $this->db->join('qualification', 'q_id = qual_id', 'inner');
            $this->db->join('staff', 's_id = staff_id', 'inner');

//search against the relevant fields
            $this->db->like('qualification', $str);
                $this->db->or_like('lastname', $str);
                $this->db->or_like('full_name', $str);
                $this->db->or_like('firstname', $str);
//set order by
            $this->db->order_by('qualification', 'asc');
//set group_by if your table has several of the same records for different reasons in
                    $this->db->group_by('job_title','asc');
              
            return $this->db->get();
                  }

View
Code:
&lt;?php
            echo form_open("training/home/search");
            ?&gt;
            <label for="term3">Begin Typing A Skillset</label>    
//User input field, converted to $str and passed to the controller and model by jQuery            
            &lt;input type="text" autocomplete="off"  name="term" id="term" size="50"&gt;
            
//This is where the UL generated by the query will go
            <div class="suggestskill" id="suggestskill_list"></div>

//Submit suggested text to a further search if need be
            &lt;input type="submit" class="button2" value="Search Skills"&gt;

            &lt;?php
            echo form_close();
            ?&gt;

jQuery function
Code:
$(document).ready(function() {

/* SkillSet SEARCH */
// triggered by input field onkeyup
function suggestskill(str){
  // if there's no text to search, hide the list div
  if (str.length == 0) {
    $('#suggestskill_list').fadeOut(500);
  } else {
    // first show the loading animation
    $('#term').addClass('loading');
    
    // Ajax request to CodeIgniter controller "ajax" method "autosuggest"
    // post the str parameter value
    $.post('http://web/address/index.php/controller/function',
      { 'str':str },
      function(result) {
        // if there is a result, fill the list div, fade it in
        // then remove the loading animation
        if(result) {
          $('#suggestskill_list').html(result);
          $('#suggestskill_list').fadeIn(500);
          $('#term').removeClass('loading');
      }
    });
  }
}

/* AUTOSUGGEST SET ACTIVITY */
// triggered by an onClick from any of the li's in the autosuggest list
// set the class_acitity field, wait and fade the autosuggest list
// then display the activity details
function set_skill(qualification, q_id) {
    $('#term').val(qualification);
    setTimeout("$('#suggestskill_list').fadeOut(100);", 100);
}

});//End Document Ready


I'm not saying its the most efficient of code, but it works. i have 8 different versions of this working across an intranet i developed.
If you use it more than once for different searches, just change all function names, and field id's e.t.c.

Hope it helps :/


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2021 MyBB Group.