Disable navigate on up/down arrows for jquery ui autocomplete

Question

I have added jQuery autocomplete custom type. There is autocomplete list selected by up/down arrows keys. But i want to disable select list on keys press. here is the code

And can we just disable on specific list type. Suppose i have some list have read-only=true attribute or readonly class . Can i make this disable for this kind of list type or need to disable for whole ui list

Answer 1

I have been doing some testing here based on the research I have found. Here is my testing:

 $(function() { var projects = [{ value: "jquery", label: "jQuery", desc: "the write less, do more, JavaScript library", icon: "jquery_32x32.png" }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", icon: "jqueryui_32x32.png" }, { value: "sizzlejs", label: "Sizzle JS", desc: "a pure-JavaScript CSS selector engine", icon: "sizzlejs_32x32.png" } ]; $("#project").autocomplete({ minLength: 0, source: projects, focus: function(event, ui) { $("#project").val(ui.item.label); return false; }, select: function(event, ui) { var keyCode = $.ui.keyCode; var proceed = true; switch (event.keyCode) { case keyCode.PAGE_UP: case keyCode.PAGE_DOWN: case keyCode.UP: case keyCode.DOWN: event.preventDefault(); break; default: $("#project").val(ui.item.label); $("#project-id").val(ui.item.value); $("#project-description").html(ui.item.desc); $("#project-icon").attr("src", "https://jqueryui.com/resources/demos/autocomplete/images/" + ui.item.icon); } return false; } }) .autocomplete("instance")._renderItem = function(ul, item) { return $("<li>") .append("<div>" + item.label + "<br>" + item.desc + "</div>") .appendTo(ul); }; $(document).on("keydown.autocomplete, keypress.autocomplete", function(e) { var that = $(e.target).autocomplete("instance"); var keyCode = $.ui.keyCode; var proceed = true; switch (e.keyCode) { case keyCode.PAGE_UP: case keyCode.PAGE_DOWN: case keyCode.UP: case keyCode.DOWN: console.log(e.key + " triggered"); proceed = false; e.preventDefault(); break; } return proceed; }); }); 

 input { height: 60px; width: 400px; margin: 10px; border-radius: 10px; padding: 10px; border: 1px solid #ddd; } #project-label { display: block; font-weight: bold; margin-bottom: 1em; } #project-icon { float: left; height: 32px; width: 32px; } #project-description { margin: 0; padding: 0; } 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <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> <div id="project-label">Select a project (type "j" for a start):</div> <img id="project-icon" src="https://jqueryui.com/resources/demos/autocomplete/images/transparent_1x1.png" class="ui-state-default" alt=""> <input id="project"> <input type="hidden" id="project-id"> <p id="project-description"></p> 

This should prevent selection using Arrow Up or Arrow Down for Autocomplete. I can see that it's triggered yet the events still move the selection.

I know this isn't too helpful, so will keep working.