How to Pass autocomplete Selected Value id to data-attribute in jquery

Question

I select State using Auto complete Query. In my Database I Need to Store State Id Not State Name. How to Pass autocomplete Selected Values respective id to data-attribute of the Input

$(document).ready(function() {

    src = "{{ url('searchajax') }}";
     $(".searchledger").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: src,
                dataType: "json",
                data: {
                    term : request.term
                },
                success: function(data) {
                    response(data);                   
                }
            });
        },
        minLength: 1,

    });

});

Answer 1

Try something like this:

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Autocomplete - Custom data and display</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <style> #project-label { display: block; font-weight: bold; margin-bottom: 1em; } #project-icon { float: left; height: 32px; width: 32px; } #project-description { margin: 0; padding: 0; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { var projects = [ { value: "1", label: "jQuery" }, { value: "2", label: "jQuery UI" }, { value: "3", label: "Sizzle JS" } ]; $( "#project" ).autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label ); $( "#project-id" ).val( ui.item.value ); return false; } }) .autocomplete( "instance" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<div>" + item.label + "</div>" ) .appendTo( ul ); }; } ); </script> </head> <body> <div id="project-label">Select a project (type "j" for a start):</div> <input id="project"> <input type="text" id="project-id"> <!-- make it hidden --> </body> </html>

On the selection of any option from autocomplete, you will get the selected value id in:

<input type="text" id="project-id">

make it hidden and get its value and use it accordingly.

How to Pass autocomplete Selected Value id to data-attribute in jquery

Question

1 answers

solution1
2 2017-06-24 09:01:15

How to Pass autocomplete Selected Value id to data-attribute in jquery

Question

1 answers

solution1 2 2017-06-24 09:01:15

solution1
2 2017-06-24 09:01:15