逗號分隔的自動完成與jQuery無法使用JavaScript JSON數據

Question

我正在嘗試創建一個逗號分隔的自動完成文本字段，該字段的自動完成json數據來自Java腳本本身。請參閱下面的代碼：

Java腳本數組：

   var remark = [
        "is under construction",
        "is a part of another construction.",
        "has acquired other work.",
        "Could not source construction."
    ];

自動完成方法：

   $("#remark").bind("keydown", function(event) {
        if (event.keyCode === $.ui.keyCode.TAB &&
                $(this).data("ui-autocomplete").menu.active) {
            event.preventDefault();
        }
    }).autocomplete({
        source: function(request, response) {
            $.getJSON(JSON.stringify(remark), { //this line is the issue..
                term: extractLast(request.term)
            }, response);
        },
        search: function() {
            var term = extractLast(this.value);
            if (term.length < 2) {
                return false;
            }
        },
        focus: function() {
            return false;
        },
        select: function(event, ui) {
            var terms = split(this.value);
            terms.pop();
            terms.push(ui.item.value);
            terms.push("");
            this.value = terms.join(",");
            return false;
        }
    });

助手功能：

    function split(val) {
        return val.split(/,\s*/);
    }
    function extractLast(term) {
        return split(term).pop();
    }

var remark保存自動完成的數據以顯示給用戶...

$.getJSON(JSON.stringify(remark)正在獲取數據以自動完成..功能，但這不適用於方面ed ..雖然當我用來從mysql服務器中獲取數據時此方法有效。與Java腳本數組一起使用它不起作用..

任何幫助或建議將是一個很大的幫助..在此先感謝...

Answer 1

source屬性直接接受一個數組作為數據源。 因此，您可以將本地數組直接傳遞給source屬性：

var remark = [
"is under construction",
"is a part of another construction.",
"has acquired other work.",
"Could not source construction."];

$("#remark").bind("keydown", function (event) {
  if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) {
    event.preventDefault();
  }
}).autocomplete({
  source: remark,
  search: function () {
    var term = extractLast(this.value);
    if (term.length < 2) {
        return false;
    }
  },
  focus: function () {
    return false;
  },
  select: function (event, ui) {
    var terms = split(this.value);
    terms.pop();
    terms.push(ui.item.value);
    terms.push("");
    this.value = terms.join(",");
    return false;
  }
});

function split(val) {
  return val.split(/,\s*/);
}
function extractLast(term) {
  return split(term).pop();
}

工作小提琴

Answer 2

這對我有效，通過此鏈接http://jsfiddle.net/phpdeveloperrahul/zMWLx/

var masterdata=["abc","pqr","rst"];
 $(function() {
    function split( val ) {
      return val.split( /,\s*/ );
    }

    function extractLast( term ) {
      return split( term ).pop();
    }

    $( "#TestNames" ).autocomplete({
      source: function( request, response ) {

            response( $.ui.autocomplete.filter(
            masterdata, extractLast( request.term ) ) );
},
      select: function( event, ui ) {
                // Add the selected term appending to the current values 
with a comma
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // join all terms with a comma
                this.value = terms.join( ", " );
                return false;
              },
      focus: function() {
               // prevent value inserted on focus when navigating the drop 
down list
               return false;
             }
    });
  });