Saturday, January 26, 2019

Jquery UI Multiple Search MVC



For creating autocomplete multiple select using the jquery UI plugin.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<label>Search fruits:</label>
<input type="text" id="txtFruits" name="txtFruits" />

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">
    $(function () {

        function split(val) {
            return val.split(/,\s*/);
        }
        function extractLast(term) {
            return split(term).pop();
        }

        $("#txtFruits")
      .on("keydown", function (event) {
          if (event.keyCode === $.ui.keyCode.TAB &&
              $(this).autocomplete("instance").menu.active) {
              event.preventDefault();
          }
      })
        .autocomplete({
            source: function (request, response) {
                $.getJSON('@Url.Action("data")', {
                    term: extractLast(request.term)
                }, response);
            },
            focus: function () {
                // prevent value inserted on focus
                return false;
            },
            select: function (event, ui) {
                var terms = split(this.value);
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push(ui.item.value);
                // add placeholder to get the comma-and-space at the end
                terms.push("");
                this.value = terms.join(", ");
                return false;
            }
        });
    })
</script>


        /// <summary>
        /// Inside the controller
        /// Don't change the parameter name (term) it's default by jquery ui
        /// </summary>


public ActionResult data(string term)
        {
            var items = new[] { "Apple", "Pear", "Banana", "Pineapple", "Peach" };

            var filteredItems = items.Where(item => item.IndexOf(term, StringComparison.InvariantCultureIgnoreCase) >= 0 );

            return Json(filteredItems, JsonRequestBehavior.AllowGet);
        }

No comments:

Post a Comment

Git Commands

Git Version   To check the git version Git -v       Git Clone To clone the repository, use the following command: Git clone [u...