Ben.js JQuery

This file provides functionality on the client for

1. Ajax calls during searches
2. Autocomplete for the search box
3. A clearable text box (has a little x on the right-hand side)

        $(function () {
	var ajaxFormSubmit = function () {
		var $form = $(this);

		var options = {
			url: $form.attr("action"),
			type: $form.attr("method"),
			data: $form.serialize()
		};

		$.ajax(options).done(function (data) {
			var $target = $($form.attr("data-ben-target"));
			$target.replaceWith(data);
		});

		return false;
	};

	var submitAutocompleteForm = function (event, ui) {
		var $input = $(this);
		$input.val(ui.item.label);

		var $form = $input.parents("form:first");
		$form.submit();
	}

	var createAutocomplete = function () {
		var $input = $(this);

		var options = {
			source: $input.attr("data-ben-autocomplete"),
			select: submitAutocompleteForm
		};
		$input.autocomplete(options);
	}

	var getPage = function () {
		var $a = $(this);
		var options = {
			url: $a.attr("href"),
			data: $("form").serialize(),
			type: "get"
		};

		$.ajax(options).done(function (data) {
			var target = $a.parents("div.pagedList").attr("data-ben-target");
			$(target).replaceWith(data);
		});
		return false

	};

	$("form[data-ben-ajax='true']").submit(ajaxFormSubmit);
	$("input[data-ben-autocomplete]").each(createAutocomplete);
	$(".main-content").on("click", ".pagedList a", getPage);

	/**
* Clearable text inputs
*/
	function tog(v) { return v ? 'addClass' : 'removeClass'; }
	$(document).on('input', '.clearable', function () {
		$(this)[tog(this.value)]('x');
	}).on('mousemove', '.x', function (e) {
		$(this)[tog(this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left)]('onX');
	}).on('touchstart click', '.onX', function (ev) {
		ev.preventDefault();
		$(this).removeClass('x onX').val('').change();
	});


})