Solved

jQuery Autocomplete filling in multiple input boxes

Posted on 2010-11-19
8
1,966 Views
Last Modified: 2012-06-27
I have seen similar solutions on here and online but they all involve an XML file for the data. But my problem is a little unique.
I have a basic jquery autocomplete that works great pulling the info from a DB and putting it in the input field. The problem I am having, is I need to make it so when it pulls info for say an item number, it also pulls the price and puts THAT in an input box in the same form when it is selected. HOWEVER, the price is pulled from the items table (DECIMAL), then it needs to get the percentage ID_NUM  that pulls a certain percentage from a PERCENTAGE table.

Ill try to explain... item_price -> get_percentage_id->get_percentage_from_table->bump_item_price_with_this_percentage-> return result into another input box.

I have way too much code to include off the bat, if you think you might have a solution or would like to see some code, let me know what parts you need. I have a simple jquery.js, a jquery.autocomplete.js, and PHP files for each code I want to lookup (item, customer, vendor, etc..)

It it all stored in a MySQL DB. Here is the script at the top of the page to give you an idea of how this one is setup.

<script type="text/javascript">
$().ready(function() {
    $("#itemcode").autocomplete("includes/get_item_code.php", {
        width: 95,
        matchContains: true,
        selectFirst: false
    });
});
</script>

Open in new window


I am still learning advanced AJAX,jquery but this is above my head and everything I have tried just seems to break the autocomplete.
Thank you for your time.
0
Comment
Question by:stconline
  • 4
  • 3
8 Comments
 
LVL 7

Expert Comment

by:dxdinh
ID: 34177816
why don't you try to implement when there is a match result and parse out the data and populate your text box
 
// assumption: your data will return as itemNumber|price|discount|ect

            $("#itemcode").result(function(event, data, formatted)
            {
                 // $("#itemcode").html( !data ? "No match!" : "Selected: " + formatted);
              if (data)
              {
                        //parse the data and populate txtboxes
              }  
              else
              {
                   // clear out textbox here
              }

 // just follow the examples of auto complete and its documentation
0
 
LVL 82

Expert Comment

by:leakim971
ID: 34177930
Check this page : http://view.jquery.com/trunk/plugins/autocomplete/demo/

The field : Multiple Birds (remote)
You look for a bird (type Black and choose one) and the id is put in the next field Hidden input

Right click on the page and choose view source, look for $("#suggest4")

You will find :

$("#suggest4").autocomplete('search.php', {
 width: 300,
 multiple: true,
 matchContains: true,
 formatItem: formatItem,
 formatResult: formatResult
}); 

Open in new window


Display the values found and set the id in bold
function formatItem(row) {
 return row[0] + " (<strong>id: " + row[1] + "</strong>)";
}

Open in new window


remove tags to have a clean result
function formatResult(row) {
 return row[0].replace(/(<.+?>)/gi, '');
}

and i think what you're really looking for, which allow you to fill another field with the choosen value :
$("#suggest4").result(function(event, data, formatted) {
 var hidden = $(this).parent().next().find(">:input");
 hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);
}); 

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 34177934
0
 

Author Comment

by:stconline
ID: 34181305
leakim, ill give that a try and let you know how it turns out ty
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:stconline
ID: 34181675
in the search.php file, how would I pull the information like this...
$items = array(
"Great <em>Bittern</em>"=>"Botaurus stellaris",

Open in new window

from a MySQL if the first one is from one table, and the 2nd input box is from another table?

I suppose I could first pull the certain percentage for that form and store it as a var, but will it let me do math when pulling the data?
0
 

Author Comment

by:stconline
ID: 34181678
EDIT: For example, the current code for the "search.php" equivilent file is...

$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = "select DISTINCT itemcode as itemcode from inventory where itemcode LIKE '$q%'";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)) {
	$itemcode = $rs['itemcode'];
	echo "$itemcode\n";
}

Open in new window


0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 34184762
    $q = strtolower($_GET["q"]);
    if (!$q) return;

    $sql = "select DISTINCT itemcode, id from inventory where itemcode LIKE '$q%'";
    $rsd = mysql_query($sql);
    $items = array();
    if($rsd)
        while($row = mysql_fetch_object($result))
             $items[] = array('id'=>$row->id, 'itemcode'=>$row->itemcode);
    print items;

Open in new window

0
 

Author Closing Comment

by:stconline
ID: 34285239
Didnt really answer how to pull info from two tables to array.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now