Is there an autocomplete textbox built into SharePoint 2010?

Question

I looked around for a bit but couldn't find anything. Is there something like this built in?

Answer 1

No, not built in, the closest thing would be the lookup field picker for Person or the BCS entity picker, or the metadata picker. But nothing that autocompletes as you type.

Answer 2

There is an autocomplete function in SPServices that is pretty simple to incorporate if jquery is an option for you. This is not out of the box, but it can be accomplished via the web interface. http://spservices.codeplex.com/wikipage?title=$().SPServices.SPAutocomplete&referringTitle=Documentation

Answer 3

Yes if you are using Managed Metadata. An Managed Metadata column will autocomplete as you type with the options set up in your Managed Metadata.

Answer 4

Another often seen approach is to use an EntityPicker, you know, a textbox with the two icons next to it to validate / browse the data repository. Bit of a shameless plug, but this article on MSDN provides the details:

http://msdn.microsoft.com/en-us/library/cc889345(office.12).aspx

Wouter

Answer 5

i finally managed to do it with http://jqueryui.com/autocomplete/#combobox you can nicely converts the default Dropdownlist to combobox

0- Load the needed Scripts and resources (i prefer editing the page with sharepoint designer and place script inside PlaceHolderAdditionalPageHead PlaceHolder rather than CEWP)

<link href="http://servername:99/assets/jquery-ui-1.11.2/jquery-ui.css" rel="stylesheet" type="text/css" />

    <style  type="text/css">
  .custom-combobox {        position: relative;        display: inline-block;      }
  .custom-combobox-toggle {        position: absolute;        top: 0;
    bottom: 0;        margin-left: -1px;        padding: 0;      }
  .custom-combobox-input {        margin: 0;        padding: 5px 10px;      }


  </style>

 <script type="text/javascript" src="http://servername:99/assets/jquery-ui-1.11.2/external/jquery.js"></script>


    <script type="text/javascript" src="http://servername:99/js/jquery.noty.packaged.min.js"></script>
    <script type="text/javascript" src="http://servername:99/assets/jquery-ui-1.11.2/jquery-ui.min.js"></script>

1- paste the jquery default combobox script

(function( $ ) {
    $.widget( "custom.combobox", {
      _create: function() {
        this.wrapper = $( "<span>" )
          .addClass( "custom-combobox" )
          .insertAfter( this.element );

        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
      },

      _createAutocomplete: function() {
        var selected = this.element.children( ":selected" ),
          value = selected.val() ? selected.text() : "";

        this.input = $( "<input>" )
          .appendTo( this.wrapper )
          .val( value )
          .attr( "title", "" )
          .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
          .autocomplete({
            delay: 0,
            minLength: 0,
            source: $.proxy( this, "_source" )
          })
          .tooltip({
            tooltipClass: "ui-state-highlight"
          });

        this._on( this.input, {
          autocompleteselect: function( event, ui ) {
            ui.item.option.selected = true;
            this._trigger( "select", event, {
              item: ui.item.option
            });
          },

          autocompletechange: "_removeIfInvalid"
        });
      },

      _createShowAllButton: function() {
        var input = this.input,
          wasOpen = false;

        $( "<a>" )
          .attr( "tabIndex", -1 )
          .attr( "title", "Show All Items" )
          .tooltip()
          .appendTo( this.wrapper )
          .button({
            icons: {
              primary: "ui-icon-triangle-1-s"
            },
            text: false
          })
          .removeClass( "ui-corner-all" )
          .addClass( "custom-combobox-toggle ui-corner-right" )
          .mousedown(function() {
            wasOpen = input.autocomplete( "widget" ).is( ":visible" );
          })
          .click(function() {
            input.focus();

            // Close if already visible
            if ( wasOpen ) {
              return;
            }

            // Pass empty string as value to search for, displaying all results
            input.autocomplete( "search", "" );
          });
      },

      _source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        response( this.element.children( "option" ).map(function() {
          var text = $( this ).text();
          if ( this.value && ( !request.term || matcher.test(text) ) )
            return {
              label: text,
              value: text,
              option: this
            };
        }) );
      },

      _removeIfInvalid: function( event, ui ) {

        // Selected an item, nothing to do
        if ( ui.item ) {
          return;
        }

        // Search for a match (case-insensitive)
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children( "option" ).each(function() {
          if ( $( this ).text().toLowerCase() === valueLowerCase ) {
            this.selected = valid = true;
            return false;
          }
        });

        // Found a match, nothing to do
        if ( valid ) {
          return;
        }

        // Remove invalid value
        this.input
          .val( "" )
          .attr( "title", value + " didn't match any item" )
          .tooltip( "open" );
        this.element.val( "" );
        this._delay(function() {
          this.input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        this.input.autocomplete( "instance" ).term = "";
      },

      _destroy: function() {
        this.wrapper.remove();
        this.element.show();
      }
    });
  })( jQuery );

2- change the last section of calling the load function like below which works best with sharepoint

$(function() {

    $("select[name$='ff31$ctl00$DropDownChoice']").combobox();
    $("select[name$='ff41$ctl00$DropDownChoice']").combobox();

    $( "#toggle" ).click(function() {
        $("select[name$='ff31$ctl00$DropDownChoice']").toggle();
        $("select[name$='ff41$ctl00$DropDownChoice']").toggle();
    });

});

Answer 6

It can be possible with using JQuery and SP services. Code can be placed in Content Editor also in custom web parts.

AutoComplete control using SPServices