Jqueryui_autocomplete

how to implement autocomplete using jquery

Deepak Sharma

Asked 20-01-2025

134

Answer (1)

<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Autocomplete functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <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> $(function() { var projects = [ { value: "java", label: "Java", desc: "write once run anywhere", }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", }, { value: "Bootstrap", label: "Twitter Bootstrap", desc: "popular front end frameworks ", } ]; $( "#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 ); $( "#project-description" ).html( ui.item.desc ); return false; } }) .data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a>" + item.label + "<br>" + item.desc + "</a><xmp>" ) .appendTo( ul ); }; }); </script> </head> <body> <div id = "project-label">Select a project (type "a" for a start):</div> <input id = "project"> <input type = "hidden" id = "project-id"> <p id = "project-description"> </body> </html>

Harsh Aggrawal

Asked 29-09-2019

45 Likes

Comments

Write comment

Submit your answer