locked
Use a function for Autocomplete And Multi Select Autocomplete in .net RRS feed

  • Question

  • User-1548796982 posted

    hi

    I use the following code for Autocomplete.

    function AutoComplete(matchFieldName, resultFieldName, lookupURL) {
        $('#' + matchFieldName).autocomplete({
            minLength: 2, // set minimum of 2 characters before search executes.
            delay: 500, // wait 0.5 second after keystroke before search executes.
            source: function (request, response) {
                $.ajax({
                    url: lookupURL,
                    type: "POST",
                    dataType: "json",
                    data: { AutoCompleteSearch: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.Title, value: item.Title, id: item.Id };
                        }))
                    }
                });
            },
            select: function (event, ui) {
                $('#' + resultFieldName).val(ui.item.id).trigger('change');
            }
        });
    }

    How can it be changed in such a way that it is used both for Autocomplete and for Multi Select Autocomplete?

    Friday, May 24, 2019 2:17 PM

All replies

  • User475983607 posted

    The autocomplete documentation clearly covers selecting multiple values.  I recommend reading the reference documentation.

    https://jqueryui.com/autocomplete/

    Example

    https://jqueryui.com/resources/demos/autocomplete/multiple.html

    Friday, May 24, 2019 2:32 PM
  • User-2054057000 posted

    I suggest you to check this tutorial which described the binding feature of Autocomplete using AJAX.

    How to create jQuery Autocomplete Feature in Step by Step manner

    Saturday, May 25, 2019 11:58 AM
  • User-1174608757 posted

    Hi tadbirgaran, 

    According to your description, you could add a listening event of select in Autocomplete,when you select a option ,it will automatically set focus back and add a new current place holder for select value.

    Here is a demo, you could see:

    index.html:

    </body>
    </html><!doctype html>
     
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>Autocomplete</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <script>
      $(function() {
        var items = [ 'France', 'Italy', 'Malta', 'England', 
            'Australia', 'Spain', 'Scotland' ];
            
        function split( val ) {
          return val.split( /,\s*/ );
        }
        function extractLast( term ) {
          return split( term ).pop();
        }
     
        $( "#search" )
          .autocomplete({
            minLength: 0,
            source: function( request, response ) {
              response( $.ui.autocomplete.filter(
                items, extractLast( request.term ) ) );
            },
            focus: function() {
              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>
    </head>
    <body>
     
    <div>
      <input id="search" size="50" />
    </div>
     
     

    You could see as below:

    Best Regards

    Wei

    Monday, May 27, 2019 6:47 AM
  • User-1548796982 posted

    Wei Zhang

    Hi tadbirgaran, 

    According to your description, you could add a listening event of select in Autocomplete,when you select a option ,it will automatically set focus back and add a new current place holder for select value.

    Here is a demo, you could see:

    index.html:

    </body>
    </html><!doctype html>
     
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>Autocomplete</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <script>
      $(function() {
        var items = [ 'France', 'Italy', 'Malta', 'England', 
            'Australia', 'Spain', 'Scotland' ];
            
        function split( val ) {
          return val.split( /,\s*/ );
        }
        function extractLast( term ) {
          return split( term ).pop();
        }
     
        $( "#search" )
          .autocomplete({
            minLength: 0,
            source: function( request, response ) {
              response( $.ui.autocomplete.filter(
                items, extractLast( request.term ) ) );
            },
            focus: function() {
              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>
    </head>
    <body>
     
    <div>
      <input id="search" size="50" />
    </div>
     
     

    You could see as below:

    Best Regards

    Wei

    How can user-selected IDs be kept in a hidden field?

    Tuesday, August 20, 2019 3:12 AM