Question

我尝试使用Materialize自动完成功能执行Ajax调用以从MVC中的数据库获取数据。当用户在文本框中键入文本时，会对URL mycontroller / GetDivisions执行ajax调用。当数据返回到调用时，自动完成中不会显示任何内容。

我尝试使用Materialise css的自动完成功能实现类似：https://www.youtube.com/watch?v=k5v8a575QX0的功能。

public class ValueList
    {
        public int ID { get; set; }

        public string Name { get; set; }
    }

列出MfList = new new List（）;

我的控制器方法：

 public JsonResult GetDivisions(string Qry)
{
  var Qry = // my custom Query 

  foreach(var item in Qry)
{
   MfList.Add(new ValueList { ID = value.ID, Name = value.Name });
}
 return Json(MfList, JsonRequestBehavior.AllowGet);
}

我的Ajax呼叫：How to use materialize autocomplete plugin with ajax?

initAutoComplete({inputId:'autocomplete-input',ajaxUrl:'/mycontroller/GetDivisions'})


function initAutoComplete(options)
{  
  var defaults = {
    inputId:null,
    ajaxUrl:false,    
    data: {}
  };

  options = $.extend(defaults, options);
  var $input = $("#"+options.inputId);

  if (options.ajaxUrl !== false)
  {
    var $autocomplete = $('<ul id="myId" class="autocomplete-content dropdown-content"></ul>'),   
        $inputDiv = $input.closest('.input-field'),
        //timeout,
        runningRequest = false,
        request;

    if ($inputDiv.length) {
      $inputDiv.append($autocomplete); // Set ul in body
    } else {      
      $input.after($autocomplete);
    }

    var highlight = function(string, $el) {
      var img = $el.find('img');
      var matchStart = $el.text().toLowerCase().indexOf("" + string.toLowerCase() + ""),
          matchEnd = matchStart + string.length - 1,
          beforeMatch = $el.text().slice(0, matchStart),
          matchText = $el.text().slice(matchStart, matchEnd + 1),
          afterMatch = $el.text().slice(matchEnd + 1);
      $el.html("<span>" + beforeMatch + "<span class='highlight'>" + matchText + "</span>" + afterMatch + "</span>");
      if (img.length) {
        $el.prepend(img);
      }
    };

    $autocomplete.on('click', 'li', function () {
      $input.val($(this).text().trim());
      $autocomplete.empty();
    });

    $input.on('keyup', function (e) {

      //if(timeout){ clearTimeout(timeout);}
      if(runningRequest) request.abort();      

      if (e.which === 13) {
        $autocomplete.find('li').first().click();
        return;
      }

      var val = $input.val().toLowerCase();
      $autocomplete.empty();

      //timeout = setTimeout(function() {

        runningRequest=true;

        request = $.ajax({
          type: 'GET', // your request type
          url: options.ajaxUrl,        
          success: function (data) {
            if (!$.isEmptyObject(data)) {
              // Check if the input isn't empty
              if (val !== '') {
                for(var key in data) {
                  if (data.hasOwnProperty(key) &&
                      key.toLowerCase().indexOf(val) !== -1 &&
                      key.toLowerCase() !== val) {
                    var autocompleteOption = $('<li></li>');
                    if(!!data[key]) {
                      autocompleteOption.append('<img src="'+ data[key] +'" class="right circle"><span>'+ key +'</span>');
                    } else {
                      autocompleteOption.append('<span>'+ key +'</span>');
                    }
                    $autocomplete.append(autocompleteOption);

                    highlight(val, autocompleteOption);
                  }
                }
              }
            }                    
          },
          complete:function(){
            runningRequest = false;
          }        
        });
      //},250);
    });
  }
  else 
  {
    $input.autocomplete({
      data: options.data
    });
  }
}

我知道它需要一个小的修改来显示数据的名称属性，但我不确定如何。任何帮助将不胜感激。

使用Materialisecss自动完成的AJAX调用不显示结果

0 个答案: