CODEWITHSUNDEEP
jqueryjsonautocomplete
Alen
Alen

Reputation: 1291

Filling input fields using autocomplete

I am trying to use jquery autocomplete. I have used a search.php file and getting data as 

{
    "id" : 1,
    "name" : "ColdFusion",
    "type" : "Tag"
},
{
    "id" : 2,
    "name" : "C#",
    "type" : "Programming"
},

What I want that when I type and suggestions come and I click on any suggestion then the esteemed result should go in their respective input fields. For instance, I type Cold and click ColdFusion in suggestion then it's id should go into input id="id" and name into input id="name" and similar with type. I could not able to think what jquery event should I use as this is the first time with autocomplete. Please help I have posted a quick working example from jquery site.

$( "#autocomplete" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
 
ID <input id="id"/>
NAME <input id="name"/>
TYPE <input id="type"/>
 
</body>
</html>

Upvotes: 1

Views: 3427

Answers (3)

jignesh patel
jignesh patel

Reputation: 982

you can change url to link search.php

$("#txtAutocomplete").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: search.php,//url
                data: { prefixText: request.term },
                dataType: "json",
                type: "POST",
                success: function (data) {
                    response($.map(data, function (item) {
                      return {
                        label: item.value,
                        value: item.value, 
                        id: item.id,
                        type: item.type
                      }
                   }))
                },
                error: function (xhr, status, err) {
                    alert("Error")
                }
            });
        },
        select: function (even, ui) {
            $("#id").val(ui.item.id);
            $("#name").val(ui.item.value);
            $("#type").val(ui.item.type);
        }
    });

Upvotes: 2

jignesh patel
jignesh patel

Reputation: 982

$( "#autocomplete" ).autocomplete({
    source: function (request, response) {
       var data = [
    {
       id:'1',
       value:  'c++',
       type:'lang'                            
    },
    {
       id:'2',
       value:  'java',
       type:'lang'                            
    },
	{
       id:'3',
       value:  'coldfusion',
       type:'lang'                            
    },
	{
       id:'4',
       value:  'php',
       type:'lang'                            
    }
  ];
       response($.map(data, function (item) {
         return {
							label: item.value,
							value: item.value, 
							id: item.id,
							type: item.type
						}
       }))
    },
     select: function (even, ui) {
       // Here you can set to inputs. 
       $("#id").val(ui.item.id);
       $("#name").val(ui.item.value);
       $("#type").val(ui.item.type);
    }
});
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
 
ID <input id="id"/>
NAME <input id="name"/>
TYPE <input id="type"/>
 
</body>
</html>

Upvotes: 2

Saksham
Saksham

Reputation: 9380

You are looking for the select method which fires when the value from the autocomplete suggestions is selected

$( "#autocomplete" ).autocomplete({
    source: function (request, response) {
        var objArray = [{
                "id" : 1,
                "name" : "ColdFusion",
                "type" : "Tag"
            },
            {
                "id" : 2,
                "name" : "C#",
                "type" : "Programming"
            }];

            response(objArray);
            return;
        },
        select: function (e, ui) {
            console.log(ui.item);//this will give you the selected object
            $('#id').val(ui.item.id);
            $('#name').val(ui.item.name);
            $('#type').val(ui.item.type);
    }

This is how you should be assigning the object to the autocomplete function and once the value is selected, the select method will fire and you can access the selected object and perform necessary operations.

Upvotes: 1

Related Questions