jQuery用户界面自动完成事件的变化 [英] Jquery UI autocomplete event change

问题描述

您好我得到了与改变事件的一个问题。
通过documntation应该有反对ui.item

  

项被选定后， ui.item指所选择的项目。 close事件后，始终触发。

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

 ＆LT;输入ID =s_town类型=文本名称=s_town/＆GT;
＆LT;输入类型=文本ID =s_town_idNAME =s_town_id/＆GT;
 

    
 $（函数（）{
  $（＃s_town）。自动完成（{
   来源：函数（请求，响应）{
    $阿贾克斯（{
     网址：/_system/_ajax/uiautocomplete.php
     数据类型：JSON
     数据：{
      名称：s_town
      长期：request.term
     }，
     成功：功能（数据）{
      响应（$。图（数据，功能（项目）{
       返回{
        标签：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
       }
      }））
     }
    }）
   }，
   的minLength：2，
   选择：函数（事件，UI）{
    $（＃s_town_id）VAL（ui.item.id）。
   }，
   变化：函数（事件，UI）
   {
    // ui.item未定义:(哪里出了问题？
    $（＃s_town_id）VAL（ui.item.id）。
   }  }）;
 }）;
    

解决方案

我找出解决办法，我测试event.originalEvent.type如果meneuselected与否和故障未设置我以后s_town_id。 但是，任何更好的解决方案还是惠康。

 ＆LT;输入ID =s_town类型=文本名称=s_town/＆GT;
＆LT;输入类型=文本ID =s_town_idNAME =s_town_id/＆GT;
 

    
 $（函数（）{
  $（＃s_town）。自动完成（{
   来源：函数（请求，响应）{
    $阿贾克斯（{
     网址：/_system/_ajax/uiautocomplete.php
     数据类型：JSON
     数据：{
      名称：s_town
      长期：request.term
     }，
     成功：功能（数据）{
      响应（$。图（数据，功能（项目）{
       返回{
        标签：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
       }
      }））
     }
    }）
   }，
   的minLength：2，
   选择：函数（事件，UI）{
    $（＃s_town_id）VAL（ui.item.id）。
   }，
   变化：函数（事件，UI）
   {
    尝试
    {
        如果（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用户界面自动完成事件的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！