【问题标题】:Execute function on option selected from jQuery ui autocomplete option list在从 jQuery ui 自动完成选项列表中选择的选项上执行功能
【发布时间】:2014-05-08 13:47:34
【问题描述】:

您好,我有下面的自动完成代码,它工作正常,但我唯一的问题是,当用户点击自动完成列表中的选项时,它应该触发另一个函数 (doSomething())。然而,这并没有被完成。如果用户做出选择并按下“enter”,则授予该功能。

var url = "http://myURL";
var field = "myField";

$(document).ready(function () {
  $("#tags").autocomplete({  
      source: function (req, add) {
          var suggestions = search(req.term, url, field);
          add(suggestions);  
      },
       select: function( event, ui ) {
        doSomething();          
  }
  });

 });  


function search(value, listurl, field) {
  var coll = new Array();
  var url =  
      listurl + "?$filter=startswith(" + field + ",'" + value + "')";

  $.ajax({
      cache: true,
      type: "GET",
      async: false,
      dataType: "json",
      url: url,  
      success: function (data) {
          var results = data.d.results;
          for (att in results) {
              var object = results[att];
              for (attt in object) {
                  if (attt == field) {
                      coll.push(object[attt]);
                  }
              }
          }
      }

  });
  return coll;}

function doSomething() {
}

感谢您的任何建议。

【问题讨论】:

  • 不能直接把回调函数赋值为select: doSomething
  • @log1c 我试过了,但对我不起作用。

标签: javascript jquery jquery-ui autocomplete


【解决方案1】:

这样解决了:

$('#tags').on('keyup change', function () {
        doSomething();
    }).change();

$('#tags').on('autocompleteselect', function (e, ui) {
    doSomething();
    });

感谢SO link

【讨论】:

    【解决方案2】:

    我知道这是一个老话题,但我遇到了这个问题,我找到了另一个我相信 JQuery 提供的解决方案。您可以使用close 事件来执行此操作。

    示例(摘自http://api.jqueryui.com/autocomplete/ 并针对此问题进行了改编):

    1) 当你初始化自动完成时

    $( "#tags" ).autocomplete({
      close: function( event, ui ) { doSomething(); }
    });
    

    2) 将监听器绑定到关闭事件

    $( "#tags" ).on( "autocompleteclose", function( event, ui ) { doSomething(); } );
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-02-09
      • 2017-08-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-10-24
      • 2022-01-21
      • 1970-01-01
      相关资源
      最近更新 更多