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)正在获取auto complete..functionality的数据，但是这不能像方面那样工作..虽然这可以用来从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();
}

Working Fiddle

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;
             }
    });
  });

逗号分隔自动完成，jquery无法使用javascript json数据

2 个答案:

Working Fiddle