autocomplete nonselected term disappears when losing focus
I'm integrating the autocomplete into some form fields on a site I'm building and it all seems to work fine, outside of the fact that if you want to enter a new field value instead of choosing one of the auto suggested ones the term will disappear when you take the focus off, for example if you tab off or click somewhere else. The only way to keep a value in the input box is to click on the input box twice after typing the value then it will stay when you tab or click out of it.
Here is what I'm using for my script, it's part of a broader form and I intend to use multiple autocomplete inputs:
[code]
<div id="editcbprofile"> <div id="formWrap"> <div id="activities" class="ui-helper-clearfix"> <input id="cb_activitiesterm" type="text"> <input id="cb_activities" name="cb_activities" type="hidden"> </div> </div></div> <script type="text/javascript" src="autocomplete/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="autocomplete/js/jquery-ui-1.8.custom.min.js"></script> <script type="text/javascript"> $(function(){ //attach autocomplete $("#cb_activitiesterm").autocomplete({ //define callback to format results source: function(req, add){ //pass request to server $.getJSON("autocomplete/autocom.php?callback=?", req, function(data) { //create array for response objects var suggestions = []; //process response $.each(data, function(i, val){ suggestions.push(val.cb_activitiesterm); }); //pass array to callback add(suggestions); }); }, //define select handler select: function(event, ui) { //create formatted activity var activity = ui.item.value, span = $("<span>").text(activity), a = $("<a>").addClass("remove").attr({ href: "javascript:", title: "Remove " + activity }).text("x").appendTo(span); //add interest to activities div span.insertBefore("#cb_activitiesterm"); //add activity to hidden form field $('input[name=cb_activities]').val(activity); }, //define select handler change: function() { //prevent 'to' field being updated and correct position $("#cb_activitiesterm").val("").css("top", 2); } }); //add click handler to activities div $("#activities").click(function(){ //focus 'to' field $("#cb_activitiesterm").focus(); }); //add live handler for clicks on remove links $(".remove", document.getElementById("activity")).live("click", function(){ //remove current activity $(this).parent().remove(); //correct 'to' field position if($("#activities span").length === 0) { $("#cb_activitiesterm").css("top", 0); } }); }); </script>
[/code]
It seems that if you click on the input box twice after typing the value it will stay so I guess I need to add something in the script to somehow get around having to do this.
I'm also not sure how exactly to pass multiple values once they are selected into the form, at the moment the only thing it passes over and saves on submit is the last value selected.