jQuery UI Autocomplete Autocomplete

JS code:

            //The operator automatically completes the box
            $('#txtUser').autocomplete({//Autocomplete plugin encapsulated in jqueryUI
                source:[{label:'A',value:'1',show:'A1'},{label:'B',value:'2',show:'B2'}],
                    function (request, response) {
                    /*1.source can be directly followed by a json data set such as ['A','B'], or a key-value pair [{label:'A',value:'1',show:'A1'},{label :'B',value:'2',show:'B2'}],
                    2. The source is directly followed by the view or page to return the json array. It should be noted that autocomplete will automatically send the address /A/B?term=input string. According to the parameters, we can filter out the data after filtering in the controller.
                    3.autocomplete will display value by default, if you want to display the value automatically with show, $('#txt').val(ui.item.show); e.preventDefault()//terminate the value displayed by default
                    4. The function (request, response) used in this demo, request has a term attribute, and response is a function. After you process and obtain the data, hand the json data to the function for processing, so that autocomplete can display the list according to the data
                    5. How to use: var data=['processed data'];response(data);or response write an anonymous function to filter or return the data set needed after processing
                    6. Summary: Three screening methods for source: 1 followed by /A/B (?term=c will automatically follow), the data after background screening. 2 Use function(request, response) {ajax to get the following}. 3 The total json data is placed in the hidden field, and then in function(request, resp){response(function to filter data)} (this method avoids accessing the database every time a word is entered when the amount of data is too large, but there is a problem that the data is not timely)* /
                    $.ajax({
                        url: '/Tool/GetOperUsers',
                        data: {uName:request.term},
                        type: 'POST',
                        dataType: 'JSON',
                        success: function (RData) {
                            response($.map(RData, function (item, index) {
                                return {
                                    label: item.BelongCompanyName,value:item.id,show:item.BelongCompanyName+'-'+item.id
                                }
                            }));
                        },
                    })
                },
                minLength: 0,
                delay: 200, // delay
                select: function (e, ui) {//e is a jquery object, which contains mouse objects, display objects, keyboard objects, etc. for us to use. There is only one item object we selected in ui, which contains label and value. automatically with the value of show
                    //What to do after selecting the drop-down box, we can generally display our custom show value here, but don't forget to add e.preventDefault() later
                 var show = ui.item.show;
                  $('#txtUser').val(show);
                  e.preventDefault();
                },
                change: function (e, ui) {
                    //What to do after the value in the text box changes, generally here you can control if the value of the text box is not the data in the drop-down box, we will clear it, the code is as follows
                    if (ui.item !== null) {
                        $('#txtUser').val(ui.item.label);
                    } else {
                        $ ('# txtUser'). val ('');
                    }
                }
            }).click(function () {
                //By default, clicking on the text box will not pop up and only prompt, so we need to add a click event so that it still pops up and can only prompt
                var $elm = $(this);
                //this is the js object, $(this) is the jquery object that contains all the functions of js and other methods encapsulated by jquery
                //$elm.autocomplete('close');//Close the drop-down
                //$('#AddUser').removeAttr('readonly')//Remove read-only
                $elm.autocomplete('search', '');//Call the search method, call the data source to display the menu, how to call autocomplete('method', 'parameter 1', 'parameter 2')
            });

Background code:

        /// <summary>
        /// Get the creator's autocomplete data source
        /// </summary>
        /// <param name="uName">Condition Box</param>
        /// <returns></returns>
        public JsonResult GetOperUsers(string uName)
        {
           IList< OperLogModel >listData= operLogService.GetOperUsers(uName);
            return Json(listData);
        }

How to get the value:

Create a hidden field, and change the value of the hidden field in the select event for each selected value. The value of the hidden field is ui.item.value, and the value is the value of the hidden field.

how to assign

Create a hidden field, when assigning, let the value of the automatic text box = text, the value of the hidden field = value

Single autocomplete or click to open link using bootstrap3-typeahead.js

Extended function: multi-select value assignment (after selecting a data, an automatic completion box is generated)

Same as above, value ids in the hidden field, and assign ids in the hidden field.

Or use the select2 plugin to click the open link