jQuery 自动完成选择事件

问题描述

我创建了 jQuery UI 自动完成功能，效果很好.但我的要求是我显示为列表的内容也应该在文本框中选择相同的内容.但它没有选择例如像 XXX (XYZ) 这样的列表但是当我选择它时只选择 XXX 而不是 XXX (XYZ)我错过了什么！！

I have created jQuery UI autocomplete which is working very good. But my requirement is that what I display as list should also select same in text box. But it is not selectingFor example list like XXX (XYZ) but when I select it only select XXX not XXX (XYZ)what I am missing !!

function getDeptStations() {
$("#txDestination").autocomplete({
  source: function (request, response) {
    var term = request.term;
    var Query = "";
    if (lang === "en")
      Query = "City_Name_EN";
    else if (lang === "fr")
      Query = "City_Name_FR";
    if (lang === "de")
      Query = "City_Name_DE";
    if (lang === "ar")
      Query = "City_Name_AR";
    var requestUri = "/_api/lists/getbytitle('Stations')/items?$select=City_Code," + Query + "&$filter=startswith(" + Query + ",'" + term + "')";
    $.ajax({
      url: requestUri,
      type: "GET",
      async: false,
      headers: {
        "ACCEPT": "application/json;odata=verbose"
      }
    }).done(function (data) {
      if (data.d.results) {
        response($.map(eval(data.d.results), function (item) {
          return {
            label: item[Query] + " (" + item.City_Code + ")",
            value: item[Query],
            id: item[Query]
          }
        }));
      }
      else {

      }
    });
  },
  response: function (event, ui) {
    if (!ui.content.length) {
      var noResult = { value: "", label: "No cities matching your request" };
      ui.content.push(noResult);
    }
  },
  select: function (event, ui) {
    $("#txDestination").val(ui.item.label);
            cityID = ui.item.id;
  },
  minLength: 1
});
 }

推荐答案

差不多了，只需要从 select 事件中返回一个 false.

Almost there, just return a false from select event.

select: function (event, ui) {
    $("#txDestination").val(ui.item.label);
            cityID = ui.item.id;
    return false;
  },

或者简单地

select: function (event, ui) {
          alert(ui.item.id);
          return false;
  },

这将引导 jquery 自动完成知道 select 已经设置了一个值.

This will guide jquery autocomplete to know that select has set a value.

更新:这不在文档中，我是通过挖掘源代码发现的，花了我一些时间.但确实它应该出现在文档或选项中.

Update: This is not in the documentation, I figured out by digging into source code, took me some time. But indeed it deserves to be in the doc or in options.

这篇关于jQuery 自动完成选择事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！