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> 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; }}); 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
Archived
This topic is now archived and is closed to further replies.