0

Can you send me all your scripts in question, database structure and data on PM. You can send me the table structure and data as an SQL statement (go to phpmyadmin and export the table in sql format).

0

Just sent you a PM. Otherwise just click on my name (broj1). You will see my profile. Click on contact me button.

0

OK, I had a quick look and fortunately spotted the errors soon enough to reply tonight. I will reply in several posts since it is going to be a lot of code

The script in the Primary.js should post over to the searchApp.php also the category (and other dropdown values) not just the value of the input box. You need category to filter the data from DB in the query. I named the variable with data conditions in the code below (also see the comments in the code).

$(document).ready(function() {

    $('.autosuggest').keyup(function () {

        var search_term = $(this).attr('value');

        // read the values of the select elements (drop downs)

        // read the value of category 
        var category=$('#category').attr('value');

        // this is the conditions you will post over to the searchApp.php script
        // assembled here for clarity
        var conditions = {

            'search_term' : search_term,
            'category' : category
        }; 

        // just for debugging
        // alert(conditions.toSource());

        // post the conditions over to the searchApp.php script
        $.post('ajax/searchApp.php', conditions, function(data) {

            //alert(data);
            $('.result').html(data);

            /*
            // you can sort this out yourself

            $('.result li').click(function() {

                var result_value=$(this).text();
                $('.autosuggest').attr('value',result_value);
                $('.result').html('');

            });
            */

        });
    });
});

This script works fine and sends object with conditions to searchApp.php, which I will explain in next post.

P.S. You can enhance this code so that ajax post will get launched only after say 3 characters have been typed in. This is how many autosuggesters work, they do not fire on the first character due to a possibility of large result sets returned.

Edited by broj1

0

Now the searchApp.php. You first have to check if all the conditions, passed over by ajax call, exist. Then you escape the values, to be safe. Next you construct the query without any conditions. Then you check if any of conditions exist and add WHERE and AND statements. In this case we have only one possible condition: the category. You can do a bit of error checking too, I have left it out for clarity. See the comments in the code.

<?php

// the database connection has to be setup here (the link has to exist)!
require_once '../connect.php';

// check if all the conditions exist
// (for now check only for search_term and category, later add other drop downs)
if(
    isset($_POST['search_term']) && 
    !empty($_POST['search_term']) &&
    isset($_POST['category'])  
  ) {

    $search_term = mysql_real_escape_string($_POST['search_term']);
    $category = mysql_real_escape_string($_POST['category']);

    // construct the query for all categories first
    $query = "SELECT Type FROM autosuggest WHERE Type LIKE '$search_term%'";

    // then if category is other than all add the condition
    if($category != 'all') {

        $query .= " AND Category LIKE '$category'";
    }

    // die($query);

    $resource = mysql_query($query);

    while(($row=mysql_fetch_assoc($resource))) {

        echo '<li><b>',$row['Type'],'</b></li>';
    }
}

?>

Edited by broj1

0

And finaly the html page with the form. I have ammended a few things here, too. First I put the javascript directly in the html but you can keep it separate in Primary.js file, if you wish. The most important thing is that you add an ID to all of the select elements (drop downs) you want to use in the query. I have done so for the category. This way jacascript (jquery) can read the selected values and send them over to searchApp.php.

The div block that displays the results (id= result) should be placed outside the form just for sematic reasons, but should work inside too, I guess.

And there is a span tag towards the end that is in wrong place. I suggest you put it somewhere else.

There are some other small errors in the html. Open the html in a good editor, you will get the errors highlighted.

And here is my version of the code (with the javascript included directly):

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="searchAppliance.php" method="post" name="search1" onsubmit='return validateForm()'>

   <table width="685" border="0">
  <tr>
       <td width="238" height="23" valign="top">
  <font size="-2">Search</font><font size="-1"><strong> APPLIANCES </strong></font>

       </td>
       <td width="443" valign="top">
       <input type="submit" value="Find" id="findbuton">
       </td>
       </tr>
       </table>
       <div id="dropdown">
       <table width="621" border="0" align="center">
       <tr><td width="100">

        <span>Category</span><br />

            <!-- give category dropdown an ID so you can read it's value with jQuery -->
            <select name="category" id="category" 
            style="width: ; background-color: #FFF; font-weight: bold; font-size: 12px; width: 120px;">

            <!-- onchange="setup(document.search1.category.value)"> -->

              <option value="all" selected="selected">All</option>
              <option value="cleaning">Cleaning</option>
              <option value="cooling">Cooling</option>
              <option value="heating">Heating</option>
              <option value="kitchen">Kicthen</option>
              <option value="lighting">Lighting</option>
              <option value="washroom">Washroom</option>
            </select></td>
  <td width="107">
  <span>Type:</span><br />
   <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <?php 
  /*
  <script src="primaryapp.js"></script>
  */
  ?>

<script>

$(document).ready(function() {

    $('.autosuggest').keyup(function () {

        var search_term = $(this).attr('value');

        // read the values of the select elements (drop downs)

        // read the value of category 
        var category=$('#category').attr('value');

        // this is the conditions you will post over to the searchApp.php script
        // assembled here for clarity
        var conditions = {

            'search_term' : search_term,
            'category' : category
        }; 

        // alert(conditions.toSource());

        // post the conditions over to the searchApp.php script
        $.post('ajax/searchApp.php', conditions, function(data) {

            //alert(data);
            $('.result').html(data);

            /*
            // you can sort this out yourself
            $('.result li').click(function() {

                var result_value=$(this).text();
                $('.autosuggest').attr('value',result_value);
                //alert(result_value);
                $('.result').html('');

            });
            */

        });
    });
});

</script>

      <input type="text" name="tag" value="" placeholder="All" class="autosuggest"/>

     </td>
     <td width="120">
     <span>Location</span><br />
        <select style="width: 120px; background-color: #FFF; font-weight: bold; font-size: 12px;" name="parish" id="parish">
          <option selected="selected">All</option>
          <option>Clarendon</option>
          <option>Hanover</option>
          <option>Kingston</option>
          <option>Manchester</option>
          <option>Portland</option>
          <option>Trelawny</option>
          <option>Westmoreland</option>
          <option>St. Andrew</option>
          <option>St. Ann</option>
          <option>St. Catherine</option>
          <option>St. Elizabeth</option>
          <option>St. James</option>
          <option>St. Mary</option>
          <option>St. Thomas</option> 
        </select></td>
 <td width="120"> Condition<br /> 
        <select style="width: 120px; background-color: #FFF; font-weight: bold; font-size: 12px;" name="condition">
          <option>All</option>
          <option>New</option>
          <option>Used</option>
        </select>
    </td>
    <td width="162">Sort by<br />
         <select style="width: 120px; background-color: #FFF; font-weight: bold; font-size: 12px;" name="condition">
          <option selected="selected">All</option>
          <option>Brand</option>
          <option>Conditon</option>
          <option>Item status</option>
          <option>Location</option>
          <option>Price</option>
          <option>Type</option>
          <option>Voltage</option>

        </select>
        </td>

        <?php 
        // this tag should not be here, put it somewhere else
        ?>
        <SPAN ID="rep"></SPAN -->

        </table> 
   </div>
</form>

      <ul class="result">
      </ul>

</body>
</html>

Edited by broj1

0

hey thanks for your help it worked :D. for the 3 characters that have to be typed in so the jquery to launch and resource for that ?

0

shouldn't this

while(($row=mysql_fetch_assoc($resource))!==false)

read in stead

while(($row=mysql_fetch_array($resource))!==false)

I am not posative on this, I am stil pretty new to php, however I have not seen the assoc function used before, have only ever seen the $row use the fetch array

0

for the 3 characters that have to be typed in so the jquery to launch and resource for that ?

All you have to do is check in the javascript code whether the search_term is at least 3 chars long. If not, you do not do an ajax call at all.

$(document).ready(function() {

    $('.autosuggest').keyup(function () {

        var search_term = $(this).attr('value');

        // if we have less than 3 chars just exit the function
        if(search_term.length < 3) {

            return;
        }

        ...

Edited by broj1

0

And also I made a small mistake in the html code, sory. I put the result unnumbered list (ul) at the end of the page. I later realized that it should be in the place where you put it originally, just after the input box, since it is the basis for extending the input box into combo box. So please move it back there.

<input type="text" name="tag" value="" placeholder="All" class="autosuggest" />
<div class="dropdown">
<ul class="result">
</ul>
...
0

so all i have to do is add this line of code to my js file and thats it?

 if(search_term.length < 3) {
return;
}
0

Yes, it basicaly exits teh function if there are less than 3 chars in the search_term. Haven't tested it, though, but I am pretty sure return statement works like exit in php. Other way of doing it would be wrapping the whole ajax bit in if(search_term.length >= 3).

$(document).ready(function() {

    $('.autosuggest').keyup(function () {

        var search_term = $(this).attr('value');

        if(search_term.length >= 3) {

            // read the values of the select elements (drop downs)

            // read the value of category 
            var category=$('#category').attr('value');

            // this is the conditions you will post over to the searchApp.php script
            // assembled here for clarity
            var conditions = {

                'search_term' : search_term,
                'category' : category
            }; 

            // alert(conditions.toSource());

            // post the conditions over to the searchApp.php script
            $.post('ajax/searchApp.php', conditions, function(data) {

                //alert(data);
                $('.result').html(data);

                /*
                // you can sort this out yourself
                $('.result li').click(function() {

                    var result_value=$(this).text();
                    $('.autosuggest').attr('value',result_value);
                    //alert(result_value);
                    $('.result').html('');

                });
                */

            });
        });
    });
}

Edited by broj1

0
<?php
require_once '../connect.php';
if(isset($_POST['search_term'])==true && empty($_POST['search_term'])==false)
{

$search_term=mysql_real_escape_string($_POST['search_term']);

$query = mysql_query("SELECT `Category`, `Type` FROM `autosuggest` WHERE `Category`='{$_POST['category']}'` AND `Type` LIKE '$search_term'");

while(($row = mysql_fetch_assoc($query))!==false)
{
echo '<li>',$row['Type'],'</li>';
}
}
?> 

You should format your code neater.

are you sure all the Vars are case sensative etc.

try this

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.