Autocomplete

Question

phphp 14 Junior Poster in Training

7 Years Ago

Sir I have these codes

<html>
    <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <script type="text/javascript">
    $(function() 
      {
          $( "#coding_language" ).autocomplete({
              source: 'autocomplete.php'
          });
      });
</script>
    </head>
    <body>
    <div id="wrapper">
    <div class="ui-widget">
    <p>Code <input type="text" id="PT"></p>
    <p>Party <input type="text" size="40" id="coding_language"></p>
    </div>
    </div>
    </body>
</html>

and autocomplete.php has these codes

<?php

include_once("includes/connectsql.php");

$searchTerm = $_GET['term'];

$query = "SELECT * FROM master WHERE desc1 LIKE '".$searchTerm."%'";
$select = sqlsrv_query($con,$query) or die ("Error". sqlsrv_errors($con)) ;  

while ($row=sqlsrv_fetch_array($select)) 
{
    $data[] =$row['code'].' - '. $row['desc1'];

}
//return json data
echo json_encode($data);
?>

The codes replies this data

When I Enter the name of any CONTACT then his name + his code appear in same textbox
But I want the code to appear in CODE text box,
I want to get code and name in separate boxes.

In screenshot, I pressed ALI.

Please help

php

Edited 7 Years Ago by phphp

3 Contributors
14 Replies
1K Views
3 Days Discussion Span
Latest Post 7 Years Ago Latest Post by phphp

cereal 1,524 Nearly a Senior Poster

7 Years Ago

Hi,

check the source of the custom data example in the autocomplete JQueryUI documentation:

http://jqueryui.com/autocomplete/#custom-data

The select property should fit your requirements:

select: function( event, ui ) {
    $( "#project" ).val( ui.item.label );
    $( "#project-id" ).val( ui.item.value );
    $( "#project-description" ).html( ui.item.desc );
    $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

    return false;
  }

Another example: https://jsfiddle.net/0wdbgage/

cereal 1,524 Nearly a Senior Poster

7 Years Ago

Try with:

$i = 0;
while($row=sqlsrv_fetch_array($select)) 
{
    $data[$i]['code'] = $row['code'];
    $data[$i]['desc1'] = $row['desc1'];
    $i++;
}

cereal 1,524 Nearly a Senior Poster

7 Years Ago

Look, it works fine for me. Do this: open the Web Developer Console which is available in Google Chrome, Chromium and Mozilla Firefox, hit the Network tab and enter a letter in the autocomplete input field, you should see a request to the server, hit the request link and click the Response tab, you should see a JSON object with the rows.

cereal 1,524 Nearly a Senior Poster

7 Years Ago

Can you show your current code? (HTML, JS and PHP)
The above results seem to be originated by your previous code.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

phphp 14 Junior Poster in Training · Answer 1 · 2016-12-10T19:10:55+00:00

Thanks, now this time I used these codes

<html>
    <head>
     <link rel="stylesheet" href="css/jquery-ui.css">

    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>        
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript">

    $(function() {
    $("#coding_language").autocomplete({
        minLength: 0,
        source: 'autocomplete.php',
        focus: function(event, ui) {
            $("#coding_language").val(ui.item.desc1);
            return false;
        },
            select: function(event, ui) {
                $("coding_language").val(ui.item.desc1);
                $("#PT").val(ui.item.code);
                return false;
            }
    });
});

</script>
    </head>
    <body>
    <div id="wrapper">
    <div class="ui-widget">
    <p>Code <input type="text" id="PT"></p>
    <p>Party <input type="text" size="40" id="coding_language"></p>
    </div>
    </div>
    </body>
</html>

But the resutlt is

autocomplete.php is like this

<?php
include_once("includes/connectsql.php");

$searchTerm = $_GET['term'];
$query = "SELECT * FROM master WHERE desc1 LIKE '".$searchTerm."%'";
$select = sqlsrv_query($con,$query) or die ("Error". sqlsrv_errors($con)) ;  
while ($row=sqlsrv_fetch_array($select)) 
{
    $data[] =$row['code'].' - '. $row['desc1'];
}
//return json data
echo json_encode($data);
?>

Data is still not showing in CODE textbox.

Please help

phphp 14 Junior Poster in Training · Answer 2 · 2016-12-10T19:44:07+00:00

phphp 14 Junior Poster in Training

7 Years Ago

Sir, it is like this

phphp 14 Junior Poster in Training · Answer 3 · 2016-12-12T02:28:25+00:00

Yes Thanks,

Now when I enter any string then data appears in autocomplete box like this

but

when this box looses focus (onblure) then it becomes blank again like this

please

phphp 14 Junior Poster in Training · Answer 4 · 2016-12-12T12:58:34+00:00

Sir, here are complete current codes

html>
    <head>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>        
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript">

$(function() 
      {
          $( "#party").autocomplete({
              minLength: 0,
              source: 'autocomplete.php',

              focus: function(event, ui) {
            $("#party").val(ui.item.desc1);
            $("#code").val(ui.item.code);
            return false;
        },
          }

          );
      });

</script>
    </head>
    <body>
    <div id="wrapper">
    <div class="ui-widget">
    <p>Code <input type="text" id="code"></p>
    <p>Party <input type="text" size="40" id="party"></p>
    </div>
    </div>
    </body>
</html>

and this is autocomplete.php

<?php
include_once("includes/connectsql.php");

$searchTerm = $_GET['term'];
$query = "SELECT code,desc1 FROM master WHERE desc1 LIKE '".$searchTerm."%'";
$select = sqlsrv_query($con,$query) or die ("Error". sqlsrv_errors($con)) ;  
while($row=sqlsrv_fetch_array($select)) 
{
$data[] =$row['code'].' - '. $row['desc1'];
}
echo json_encode($data);
?>

imchivaa 0 Newbie Poster · Answer 5 · 2016-12-12T14:05:56+00:00

Why don't return the results as object of the search instead of combining both in autocomplete.php?

Return both code and desc as object and combine code - desc1 in your php view. Access the object in your view and append the string there.

phphp 14 Junior Poster in Training · Answer 6 · 2016-12-12T14:48:14+00:00

Sir, You mean I should chnage this part

while($row=sqlsrv_fetch_array($select)) 
{
$data[] =$row['code'].' - '. $row['desc1'];
}

If yes then how?

cereal 1,524 Nearly a Senior Poster Featured Poster · Answer 7 · 2016-12-12T16:15:48+00:00

Ok, the blank list of results happens because JQuery expects to receive label and/or value as index keys of the result set.

Multiple types supported:
Array: An array can be used for local data. There are two supported formats:

An array of strings: [ "Choice1", "Choice2" ]

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.

Source: http://api.jqueryui.com/autocomplete/#option-source

So change desc1 to label and should work fine. I was testing with a custom table which had a label column, so the issue didn't show up to me.

Do:

<script type="text/javascript">
    $(function() {

        $("#party").autocomplete({
            minLength: 0,
            source: "autocomplete.php",
            focus: function(event, ui) {
                $("#party").val(ui.item.label);
                $("#code").val(ui.item.code);
                return false;
            },
            select: function(event, ui) {
                $("#party").val(ui.item.label);
                $("#code").val(ui.item.code);
                return false;
            }
        })
    });
</script>

And in the PHP side:

$i = 0;
while($row=sqlsrv_fetch_array($select)) 
{
    $data[$i]['code']  = $row['code'];
    $data[$i]['label'] = $row['desc1'];
    $i++;
}

phphp 14 Junior Poster in Training · Answer 8 · 2016-12-12T17:16:18+00:00

Thanks sir for helping But...

about 80% solved.

Please

cereal 1,524 Nearly a Senior Poster Featured Poster · Answer 9 · 2016-12-13T01:29:07+00:00

Spaces in URLs can be represented by %20 or by +, it depends on the browser and by the enctype attribute of the form tag.

Your script can receive requests like these:

term=abc++++
term=abc%20%20%20%20

Which in your code equals to:

string(7) "abc    "

So, instead of $searchTerm = $_GET['term']; do:

$searchTerm = trim(filter_input(INPUT_GET, 'term', FILTER_SANITIZE_STRING));

And the script will process the intended input:

string(3) "abc"

Note, in this case you don't need to use urldecode() as superglobals are already decoded. Also, you should query the database through prepared statements.

phphp 14 Junior Poster in Training · Answer 10 · 2016-12-13T02:32:46+00:00

sir I also used trim() in this line to get correct party name

   $data[$i]['label'] = trim($row['desc1']);

Thanks sir, now everything is ok.