Shulou(Shulou.com)06/01 Report--

Take a look at the parameters of autocomplete first.

ServiceUrl: server-side URL or callback function that returns a Url string

Additional configuration of ajaxSettings:jQuery Ajax request

Lookup: the list of data for the query. String array or object literals (format {value: 'string', data: any})

LookupFilter: filter function for function (suggestion, query, queryLowerCase) {} local data query

LookupLimit: limit on the number of queries. Default: no limit

OnSelect:function (suggestion) {}, the destroy function after the user selects the query result

MinChars: the minimum number of words to trigger the prompt. Default: 1

MaxHeight: the maximum height of the prompt list container. Default is 300.

DeferRequestBy: number of milliseconds to delay Ajax requests. Default: 0

Width: prompt the width of the container. Default: auto

Params: request for passing parameters, optional

FormatResult:function (suggestion, currentValue) {}

Delimiter: a string or regular expression that splits the input value and uses the last one as a query word, usually separated by commas

ZIndex: the z-index value of the prompt container. Default is 9999.

Type: gets the Ajax request method of the prompt. Default: get

NoCache: whether to cache prompt results. Default: false

OnSearchStart:function (query) {}

OnSearchComplete:function (query, suggestions) {}

OnSearchError:function (query, jqXHR, textStatus, errorThrown) {}

OnInvalidateSelection:function () {}. After selecting the prompt result, the function is called if the value of input changes.

TriggerSelectOnValidInput: if the query matches, the onSelect function is triggered as long as you focus on input. Default value: true.

PreventBadQueries: default value: true

BeforeRender:function (container) {} calls the function before displaying the query result

TabDisabled: default value: false

ParamName: default value: 'query'

TransformResult:function (response, originalQuery) {}

AutoSelectFirst: whether to automatically populate the first item of the query list. Default value: false

AppendTo: the query list container is added to that element. Default value: document.body

DataType: the data format returned by the server

ShowNoSuggestionNotice: if the query result is empty, is there a prompt? default value: false

NoSuggestionNotice: prompt. Default value: No results

ForceFixPosition: default value: false

Orientation: prompts for the vertical position of the container. Default value: 'bottom', optional' top','auto'

GroupBy: prompts for the property value of the data object

There are many configuration parameters, but only a few may be useful.

The key parameters to realize multiple selection are delimiter, onInvalidateSelection, triggerSelectOnValidInput.

The difficulty of autocomplete in the actual project is that the index value of the query result is needed and saved in the hidden field, so the two parameters onInvalidateSelection and triggerSelectOnValidInput are very important.

Demo

The multiple selection of the demo code does not delete the operation, leaving you a little room for thinking. Of course, the way to choose more is not the only one.

See the Pen autocomplete by Zongbin Niu (@ nzbin) on CodePen.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.