JQuery Autocomplete issue

[stitchmedia]

Hi, not sure if this is the correct forum to post this in but here goes...

 

Im using the JQuery Autocomplete function on a <select> field.  The select field pulls data from a recordset and works perfectly.  The autocomplete works fine if you type into the field but if you click the button to drop down the list to select an option for some reason it tries to submit the form that the field is sitting in.

 

Here is the code I am using.  It is the standard code, all I have changed is the field it links to:

 

<link type="text/css" href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="development-bundle/demos/demos.css" rel="stylesheet" />
<script type="text/javascript">
(function($) {
	$.widget("ui.combobox", {
		_create: function() {
			var self = this;
			var select = this.element.hide();
			var input = $("<input>")
				.insertAfter(select)
				.autocomplete({
					source: function(request, response) {
						var matcher = new RegExp(request.term, "i");
						response(select.children("option").map(function() {
							var text = $(this).text();
							if (!request.term || matcher.test(text))
								return {
									id: $(this).val(),
									label: text.replace(new RegExp("(?![^&;]+(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+", "gi"), "<strong>$1</strong>"),
									value: text
								};
						}));
					},
					delay: 0,
					select: function(e, ui) {
						if (!ui.item) {
							// remove invalid value, as it didn't match anything
							$(this).val("");
							return false;
						}
						$(this).focus();
						select.val(ui.item.id);
						self._trigger("selected", null, {
							item: select.find("[value='" + ui.item.id + "']")
						});

					},
					minLength: 0
				})
				.addClass("ui-widget ui-widget-content ui-corner-left");
			$("<button> </button>")
			.insertAfter(input)
			.button({
				icons: {
					primary: "ui-icon-triangle-1-s"
				},
				text: false
			}).removeClass("ui-corner-all")
			.addClass("ui-corner-right ui-button-icon")
			.position({
				my: "left center",
				at: "right center",
				of: input,
				offset: "-1 0"
			}).css("top", "")
			.click(function() {
				// close if already visible
				if (input.autocomplete("widget").is(":visible")) {
					input.autocomplete("close");
					return;
				}
				// pass empty string as value to search for, displaying all results
				input.autocomplete("search", "");
				input.focus();
			});
		}
	});

})(jQuery);

$(function() {
	$("#ToUserID").combobox();
});
</script>
<style>
	/* TODO shouldn't be necessary */
	.ui-button-icon-only .ui-button-text { padding: 0.35em; } 
	.ui-autocomplete-input { padding: 0.48em 0 0.47em 0.45em; }
</style>

 

Here is the form on the page (I'm using a Dreamweaver Developer Toolbox function for this form):

 

<form method="post" id="form1" action="<?php echo KT_escapeAttribute(KT_getFullUri()); ?>">
        <table width="100%" cellpadding="2" cellspacing="0">
          <tr>
            <td><label for="ToUserID">To:</label></td>
            <td><select id="ToUserID" name="ToUserID">
              <?php
do {  
?>
              <option value="<?php echo $row_Users['UserID']?>"><?php echo $row_Users['Username']?></option>
              <?php
} while ($row_Users = mysql_fetch_assoc($Users));
  $rows = mysql_num_rows($Users);
  if($rows > 0) {
      mysql_data_seek($Users, 0);
  $row_Users = mysql_fetch_assoc($Users);
  }
?>
            </select>
            </td>
          </tr>
          <tr>
            <td><label for="MessageTitle">Subject:</label></td>
            <td><input type="text" name="MessageTitle" id="MessageTitle" value="<?php echo KT_escapeAttribute($row_rsmessaging['MessageTitle']); ?>" size="50" />
                <?php echo $tNGs->displayFieldHint("MessageTitle");?> <?php echo $tNGs->displayFieldError("messaging", "MessageTitle"); ?> </td>
          </tr>
          <tr>
            <td valign="top"><label for="MessageContent">Body:</label></td>
            <td><textarea name="MessageContent" id="MessageContent" value="<?php echo KT_escapeAttribute($row_rsmessaging['MessageContent']); ?>" cols="45" rows="5"/></textarea>
                <?php echo $tNGs->displayFieldHint("MessageContent");?> <?php echo $tNGs->displayFieldError("messaging", "MessageContent"); ?> </td>
          </tr>
          <tr>
            <td colspan="2"><div align="right">
              <input type="image" src="images/sendmessage.gif" name="KT_Insert1" id="KT_Insert1" value="Send Message" />
            </div></td>
          </tr>
        </table>
        <input type="hidden" name="FromUserID" id="FromUserID" value="<?php echo KT_escapeAttribute($row_rsmessaging['FromUserID']); ?>" />
      </form>

[JustLikeIcarus]

In the .click section of your function try changing it to

 

.click(function() {
               // close if already visible
               if (input.autocomplete("widget").is(":visible")) {
                  input.autocomplete("close");
                  return false;
               }
               // pass empty string as value to search for, displaying all results
               input.autocomplete("search", "");
               input.focus();
               return false;
            });

[stitchmedia]

Excellent all sorted thanks