jQuery的自动完成评选活动 [英] jQuery autocomplete selection event

问题描述

我已经创建了这是工作非常好jQuery用户界面自动完成。但我的要求是什么，我显示为清单还应选择文本框一样。但它不选择
对于像XXX（XYZ），当我选择它只能选择不XXX XXX（XYZ）的例子，但名单
我所缺少的！

 函数getDeptStations（）{
$（＃txDestination）。自动完成（{
  来源：函数（请求，响应）{
    VAR长期= request.term;
    变种查询=;
    如果（郎===EN）
      查询=City_Name_EN;
    否则，如果（郎===FR）
      查询=City_Name_FR;
    如果（郎===德）
      查询=City_Name_DE;
    如果（郎===AR）
      查询=City_Name_AR;
    VAR requestUri =/ _api /列表/ getbytitle（'站'）/项目$选择= City_ code，？+查询+＆放大器; $过滤器= startswith（+查询+，'+长期+ '）;
    $阿贾克斯（{
      网址：requestUri，
      键入：GET，
      异步：假的，
      标题：{
        接受：应用/ JSON; ODATA =详细
      }
    }）。完成（功能（数据）{
      如果（data.d.results）{
        响应（$。图（EVAL（data.d.results），功能（项目）{
          返回{
            标签：项目[查询] +（+ item.City_ code +），
            价值：项目[查询]
            编号：项目[查询]
          }
        }））;
      }
      其他{      }
    }）;
  }，
  回应：函数（事件，UI）{
    如果（！ui.content.length）{
      VAR noResult = {值：，标签：没有城市符合您的要求};
      ui.content.push（noResult）;
    }
  }，
  选择：函数（事件，UI）{
    $（＃txDestination）VAL（ui.item.label）。
            city​​ID = ui.item.id;
  }，
  的minLength：1
}）;
 }
 

解决方案

快到了，刚刚从选择事件中返回一个错误。

 选择：函数（事件，UI）{
    $（＃txDestination）VAL（ui.item.label）。
            city​​ID = ui.item.id;
    返回false;
  }，
 

这将引导jquery的自动完成要知道，选择已设置的值。

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

解决方案

Almost there, just return a false from select event.

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

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

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