NotionCommotion Posted February 18, 2015 Share Posted February 18, 2015 I have a dialog which contains an input field. The input field should display a default value, and have a jQuery autocomplete attached to it. I have it 99% working with the below code, and a live demo is at http://jsbin.com/zihoxekacu/1/. The problem is if user types "tw", they can select "two", but after they do, I wish to have the input field go back to "Search Help", and not display "Two". Interestingly, even if I reload the page using FireFox (not IE or Chrome), the input still displays "Two". Thanks! <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Testing</title> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script> <style type="text/css"> </style> <script type="text/javascript"> $(function(){ $('.getHelp').click(function(e){ $('#dialog-help').dialog('open'); }); $("#dialog-help").dialog({ autoOpen : false, height : 500, width : 640, open: function(event, ui){ $(this).find('input.searchHelp').val('').blur(); } }); $("#dialog-help input.searchHelp").autocomplete({source: ['one','two','three'], minLength: 1,select: function(event, ui){ $(this).val('').blur(); $('#dialog-help div').text(ui.item.value); }}); $('.default-value').each(function() { var $t=$(this), default_value = this.value; $t.css('color', '#929292'); $t.focus(function() { if(this.value == default_value) { this.value = ''; $t.css('color', 'black'); } }); $t.blur(function() { if($.trim(this.value) == '') { $t.css('color', '#929292'); this.value = default_value; } }); }); }); </script> </head> <body> <button type="button" class="getHelp" >open</button> <div id="dialog-help" class="dialog-help"> <input class="searchHelp default-value" type="text" name="search" value="Search Help" /> <div></div> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/294698-default-values-for-autocomplete-fields/ Share on other sites More sharing options...
NotionCommotion Posted February 24, 2015 Author Share Posted February 24, 2015 $("#dialog-help input.searchHelp").autocomplete({source: ['one','two','three'], minLength: 1,select: function(event, ui){ $(this).val('').blur(); $('#dialog-help div').text(ui.item.value); return false; }}); Quote Link to comment https://forums.phpfreaks.com/topic/294698-default-values-for-autocomplete-fields/#findComment-1506587 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.