Home/ Questions/Q 8824551
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T06:39:42+00:00

I am trying to use autocomplete with the url option – on the localhost.

  • 0

I am trying to use autocomplete with the url option – on the localhost. My php file returns as follows;

[ { label: "025170000", value: "18511"},....{ label: "TE-5170V-Special", value: "8464"} ]

for example.

My html code looks like this;

    <head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Remote datasource</title>
    <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.23.custom.css">
    <script src="js/jquery-1.8.0.min.js"></script>
    <script src="js/jquery-ui-1.8.23.custom.min.js"></script>
    <style>
    .ui-autocomplete-loading { background: white right center no-repeat; }
    </style>
    <script>
    $(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }

        $( "#products" ).autocomplete({
            source: "auto_complete.php",
            minLength: 3,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );
            }
        });
    });
    </script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
    <label for="products">Products: </label>
    <input id="products" />
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div><!-- End demo -->

I had it working with an array of strings but can’t get it working with the label – value pairs.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    OK, I found out that you need to have quotation marks around ‘label’ and ‘value as well. so it needs to look like this;

    [ { "label": "025170000", "value": "18511"},....{ "label": "TE-5170V-Special", "value": "8464"} ]

    I did this by using this code in the server-side script;

          $result = mysql_query($sql);
  $products = '[';
  while ($row = mysql_fetch_assoc($result)) {
        extract($row);
        $products .= " { \"label\": \"$productnumber\", \"value\": \"$productid\"},";
  }
  $products=substr($products,0,-1); 
  $products .= ' ]';
    • 0