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

[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

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

you need to add inside your <li>


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):

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.

[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.

Thanks a ton Mike - maybe that will give the original poster some insight too. =)

You the man - man!

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

Not sure if you fixed it, but this works a treat for me, courtesy of IBM CI tutorials

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>";

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
            return $this->db->get();

            echo form_open("training/home/search");
            <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;

            echo form_close();

jQuery function
$(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) {
  } else {
    // first show the loading animation
    // Ajax request to CodeIgniter controller "ajax" method "autosuggest"
    // post the str parameter value
      { 'str':str },
      function(result) {
        // if there is a result, fill the list div, fade it in
        // then remove the loading animation
        if(result) {

// 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) {
    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.