Jquery UI 自动完成事件更改 [英] Jquery UI autocomplete event change

问题描述

我遇到了更改事件的问题.通过文档应该有对象 ui.item

<块引用>

选择一个项目后；ui.item 指的是选中的项目.总是在关闭事件之后触发.

但是当我尝试时 ui.item 未定义 :( 当自动完成中的输入与脚本中的数据不匹配时，我想取消设置 s_town_id.

<input type="text" id="s_town_id" name="s_town_id"/>

<前><代码>$(函数(){$("#s_town").自动完成({来源:功能(请求，响应){$.ajax({url: "/_system/_ajax/uiautocomplete.php",数据类型:json"，数据: {名称:s_town"，术语:request.term},成功:功能(数据){响应($.map(数据，功能(项目){返回 {标签:item.whisper_name+ " [" + item.zip_code + "/" + item.lup_state + "]",值:item.whisper_name，id: item.whisper_id,zip_code: item.zip_code,lup_state: item.lup_state,stateid: item.stateid}}))}})},最小长度:2，选择:功能(事件，用户界面){$("#s_town_id").val(ui.item.id);},更改:功能(事件，用户界面){//ui.item 未定义 :( 问题出在哪里?$("#s_town_id").val(ui.item.id);}});});

解决方案

我找到了测试 event.originalEvent.type 是否是meneuselected 并在失败后取消设置s_town_id 的解决方案.但任何更好的解决方案仍然是受欢迎的.

<input type="text" id="s_town_id" name="s_town_id"/>

<前><代码>$(函数(){$("#s_town").自动完成({来源:功能(请求，响应){$.ajax({url: "/_system/_ajax/uiautocomplete.php",数据类型:json"，数据: {名称:s_town"，术语:request.term},成功:功能(数据){响应($.map(数据，功能(项目){返回 {标签:item.whisper_name+ " [" + item.zip_code + "/" + item.lup_state + "]",值:item.whisper_name，id: item.whisper_id,zip_code: item.zip_code,lup_state: item.lup_state,stateid: item.stateid}}))}})},最小长度:2，选择:功能(事件，用户界面){$("#s_town_id").val(ui.item.id);},更改:功能(事件，用户界面){尝试{if(event.originalEvent.type != "menuselected"){//取消设置 ID$("#s_town_id").val("");}}抓住(错误){//取消设置 ID$("#s_town_id").val("");}}});});

Hi I got a problem with change event. By documntation there should be object ui.item

After an item was selected; ui.item refers to the selected item. Always triggered after the close event.

But when I try it ui.item is undefined :( I want unset s_town_id when input in autocomplete doesn't match with data from script.

<input id="s_town" type="text" name="s_town" />
<input type="text" id="s_town_id" name="s_town_id"  />

    
 $(function() {
  $("#s_town").autocomplete({
   source: function(request, response) {
    $.ajax({
     url: "/_system/_ajax/uiautocomplete.php",
     dataType: "json",
     data: {
      name: "s_town",
      term: request.term
     },
     success: function(data) {
      response($.map(data, function(item) {
       return {
        label: item.whisper_name+ " [" + item.zip_code + " / " + item.lup_state + "]",
        value: item.whisper_name,
        id: item.whisper_id, 
        zip_code: item.zip_code, 
        lup_state: item.lup_state, 
        stateid: item.stateid
       }
      }))
     }
    })
   },
   minLength: 2,
   select: function(event, ui) {
    $("#s_town_id").val(ui.item.id);
   },
   change: function(event, ui)
   {
    // ui.item is undefined :( where is the problem?
    $("#s_town_id").val(ui.item.id);
   }

  });


 });
    

解决方案

I find out solution where I testing event.originalEvent.type if it is meneuselected or not and after fail I unset s_town_id. But any better solution is still wellcome.

<input id="s_town" type="text" name="s_town" />
<input type="text" id="s_town_id" name="s_town_id"  />

    
 $(function() {
  $("#s_town").autocomplete({
   source: function(request, response) {
    $.ajax({
     url: "/_system/_ajax/uiautocomplete.php",
     dataType: "json",
     data: {
      name: "s_town",
      term: request.term
     },
     success: function(data) {
      response($.map(data, function(item) {
       return {
        label: item.whisper_name+ " [" + item.zip_code + " / " + item.lup_state + "]",
        value: item.whisper_name,
        id: item.whisper_id, 
        zip_code: item.zip_code, 
        lup_state: item.lup_state, 
        stateid: item.stateid
       }
      }))
     }
    })
   },
   minLength: 2,
   select: function(event, ui) {
    $("#s_town_id").val(ui.item.id);
   },
   change: function(event, ui)
   {
    try
    {
        if(event.originalEvent.type != "menuselected")
        {
             // Unset ID
             $("#s_town_id").val("");
        }
    }
    catch(err){ 
        // unset ID 
        $("#s_town_id").val("");
    }
   }

  });


 });
    

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