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

15401396_10202672896140691_934130179_n.png

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

Hi,

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

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/

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

Untitled.png

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

Try with:

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

Sir, it is like this

Untitled.png

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.

Yes Thanks,

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

15401396_10202672896140691_934130179_n.png

but

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

Untitled.png

please

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

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);
?>

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.

Sir, You mean I should chnage this part

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

If yes then how?

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++;
}

Thanks sir for helping But...

Untitled.png

about 80% solved.

Please

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.

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.

commented: You're welcome! +14
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.