2

I have written some script to auto fill the search input (search data from database), Along with query I am sending some dynamic variable in remote url for advanced search .

But I am not receiving any data in destination file , if sent only query in 'remote' its working fine but along with dynamic variable in remote url its not working ! please check my code and guide me where I am wrong 

<script src="typeahead.min.js"></script>
   <script>
$(document).ready(function(){
$('input.typeahead').typeahead({
    name: 'typeahead',
    //remote:'subtasksearch.php?key=%QUERY',
    //remote:'subtasksearch.php?key=%QUERY&&mani=123',
    remote: {
    url: 'subtasksearch.php?key=%QUERY&&mani=',
    replace: function () {
        var q = 'subtasksearch.php?key=%QUERY&&mani=';
        if ($('#country').val()) {
            q += encodeURIComponent($('#country').val());
        }
        return q;
      }
    },
    limit : 10
});
 });
</script>

And my subtasksearch.php is 

<?php
$key=$_GET['key'];
$mani=$_GET['mani'];
$array = array();
$con=mysqli_connect("localhost","","","");

if (mysqli_connect_errno())
 {
   echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }


$query=mysqli_query($con, "select * from sub_task where name LIKE '%{$key}%'");
while($row=mysqli_fetch_assoc($query))
{
  $array[] = $row['name'];
  //$array[] = $mani;
}
echo json_encode($array);

And my search input is 

 <input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Task" required="">

If you use simple remote to send query its working fine 

remote:'subtasksearch.php?key=%QUERY',
//or
remote:'subtasksearch.php?key=%QUERY&&mani=123',

With dynamic variable in remote url is not working , I have observed few things in console the data is passing in URL and returning empty array I guess please check the bellow image

console image

Please guide Me where I am wrong! Is I am sending values in wrong way ?

J.vee
  • 623
  • 1
  • 7
  • 26
manikanta gowda
  • 103
  • 2
  • 11
  • i get to know that The remote option no longer has replace. Instead you should use prepare: , i have updated my question please check – manikanta gowda Dec 06 '18 at 10:15

1 Answers1

0

I believe the problem is in how you send the query variable - you are sending literal %QUER instead of the actual query value.

url: 'subtasksearch.php?key=%QUERY&&mani=',

should be something that incorporates the variable

url: 'subtasksearch.php?key='+QUERY+'&&mani=',

Not sure about the typeahead addon, but maybe this.val() will be enough to get the value, e.g.:

url: 'subtasksearch.php?key='+this.val()+'&mani=',

Also, please consider using Prepared Statements to patch the injection risks (even in MySQLI): How can I prevent SQL injection in PHP?

Update

So looking into the actual plugin you use, it appears you need to configure Bloodhound for the suggestbox rather than just standalone typeahead. This means including the Bloodhound javascript source or using the bundle.

<script src="http://twitter.github.com/typeahead.js/releases/latest/typeahead.bundle.min.js"> </script>
<script> 
var tasks = new Bloodhound({
    remote: {
        url: 'subtasksearch.php?key=%QUERY.json',
        wildcard: '%QUERY'
    }
});

$('input.typeahead').typeahead({
    name: 'typeahead',
    source: tasks,
    limit: 10
  });
 </script>

second update

I'm not sure of what Bloodhound does behind the screens, whether it allows you to construct a query like so:

var country = $('#country').val()
var tasks = new Bloodhound({
    remote: {
        url: 'subtasksearch.php?key=%QUERY.json'+'&country='+country,
        wildcard: '%QUERY'
    }
});
Community
  • 1
  • 1
T. Altena
  • 752
  • 4
  • 15