最近在開發一個類似於Gmail收件者的功能，在收件者欄位輸入關鍵字會自動顯示符合關鍵字的收件者提供選擇，如下。

首先使用jQuery的autocomplete套件來完成顯示符合關鍵字的收件者的功能

$.ajax({
                url: '/Recruitment/FaceInterview/InterviewersAutocomplete/',
                type: "json",
                dataType: "json",
                success: function (json) {

                    $("#InterviewerTextBox").autocomplete({
                        source: json,     //指定資料來源 格式:String, Array, Function
                        minLength: 0,   //輸入框字符達到minLength，啟動autocomplete
                        select: function (event, ui) {
                            var newDiv = document.createElement("div");
                            newDiv.id = ui.item.label;

                            newDiv.innerHTML = "<li class='selected-item' Interviewer='"+ui.item.label+"'><p>" + ui.item.label + "</p><span class='selectDel'><button type='button' class='close deleteInterviews' >×</button></span></li>"
                            //將新產生的div插入到輸入框前面
                            $('#TextBoxDiv').before(newDiv);         
                        },
                        open: function (json) {
                        },
                        close: function (json) {

                        },
                        error: function (json) {}
                    });

                }
            })

實際執行後會發現autocomplete功能正常執行，但是輸入的文字還是會留著，與Gmail的功能不太一樣，

而且要輸入第二個人的時候還要再把文字刪掉，非常不方便。

於是select function中再加一行把textbox值清空的程式

$('#InterviewerTextBox').val("");

卻發現沒有動作，textbox的值並沒有被清空

請教google大神後，原來select 這個function會在做完使用者自訂的動作後才會去把選擇的值填入到textbox中

只要在function的最後加上return false就能關掉自動填值的功能，讓清空的程式正常運作

然後卻發生autocomplete產生的下拉選單不會自動消失的bug 

解法是加上 $("#InterviewerTextBox").autocomplete("close");  手動去把下拉選單關掉

但在寫這篇文章時候要去截錯誤的圖時卻正常了。

修改過後的程式碼

$.ajax({
                url:'/Recruitment/PhoneInterview/InterviewersAutocomplete/',
                type: "json",
                dataType: "json",
                success: function (json) {
                    $("#InterviewerTextBox").autocomplete({
                        source: json,
                        minLength: 0,
                        select: function (event, ui) {
                            var newDiv=document.createElement("div");
                            newDiv.id = ui.item.label;
                            newDiv.innerHTML = "<li class='selected-item'><p>" + ui.item.label + "</p><span class='selectDel'><button type='button' class='close deleteInterviews' >×</button></span></li>"

                            //將新產生的div插入到輸入框前面
                            $('#TextBoxDiv').before(newDiv);

                            //點選完後清空輸入框
                            $('#InterviewerTextBox').val("");

                            //關閉下拉選單
                            $("#InterviewerTextBox").autocomplete("close");

                            return false;
                            
                        },
                        open: function (json) {
                        },
                        close: function (json) {
                           
                        },
                        error: function (json) { alert(json); }
                    });
  
                }
            })