Autocomplete jquery ui在按下键时自动完成js错误

我已将jquery ui AutomcomComplete插件包括在以下结构中：

<li class="search">
                            <input type="text" class="searchfield" name="searchfield" value="Search for Products" />
                        </li>

我使用的是jQuery的1.7.1版和jQuery UI的1.8.12版

在jQueryUIAutoComplete的演示页面上，键控功能运行良好

知道我的星座出了什么问题吗

使用远程或本地数据没有什么区别

致以最良好的祝愿，

---

Ramo

我真的可以让你的代码正常工作。所以我试着用一种更简单的方式重写它。问题是呈现函数只接受字符串，而不接受html元素。因此，我添加了一个侦听器，在列表生成后呈现列表（在keydown（）事件中触发）

我认为你做得不对

• 为什么要在这些项目上添加另一个类？它们已经有一个，因此可以进行样式化
• 为什么要将它们转换为节点？只需在它们上添加一个click（）事件

你能解释一下你的功能目标吗

// Your list of links
var redirectLinks = {'Ruby': '1234.com', 'Asp': '1235.com'};
function redirect(url) {
  // TODO implement window.location=url or whatever you like
  if(redirectLinks[url] != undefined) {
    alert('redirecting to '+url+' => '+redirectLinks[url]);
  }
}

$('.searchfield').each(function () {
  $(this).autocomplete(availableTags, { 
    minLength: 1,
    change: function(event, ui) {
      console.log('this change event doesnt seem to be fired');        
    },
    select: function(event, ui) {
      console.log('this select event doesnt seem to be fired');        
    }
  });
  // After the list construction
  $(this).keyup(function(e){      
    if (e.which == 13) { // typing enter validates the input => autocompletechange
      console.log('validating input '+$(this).val());    
      redirect($(this).val());
    }  
    var $list = $('.ac_results:first ul').find('li');
    $list.click(function() { // adding an event on suggestion => autocompleteselect
      console.log('clicking on suggestion '+$(this).text());    
      redirect($(this).text());
    });
  }); 


});

---

我真的可以让你的代码工作。所以我试着用一种更简单的方式重写它。问题是呈现函数只接受字符串，而不接受html元素。因此，我添加了一个侦听器，在列表生成后呈现列表（在keydown（）事件中触发）

我认为你做得不对

• 为什么要在这些项目上添加另一个类？它们已经有一个，因此可以进行样式化
• 为什么要将它们转换为节点？只需在它们上添加一个click（）事件

你能解释一下你的功能目标吗

// Your list of links
var redirectLinks = {'Ruby': '1234.com', 'Asp': '1235.com'};
function redirect(url) {
  // TODO implement window.location=url or whatever you like
  if(redirectLinks[url] != undefined) {
    alert('redirecting to '+url+' => '+redirectLinks[url]);
  }
}

$('.searchfield').each(function () {
  $(this).autocomplete(availableTags, { 
    minLength: 1,
    change: function(event, ui) {
      console.log('this change event doesnt seem to be fired');        
    },
    select: function(event, ui) {
      console.log('this select event doesnt seem to be fired');        
    }
  });
  // After the list construction
  $(this).keyup(function(e){      
    if (e.which == 13) { // typing enter validates the input => autocompletechange
      console.log('validating input '+$(this).val());    
      redirect($(this).val());
    }  
    var $list = $('.ac_results:first ul').find('li');
    $list.click(function() { // adding an event on suggestion => autocompleteselect
      console.log('clicking on suggestion '+$(this).text());    
      redirect($(this).text());
    });
  }); 


});

---

您应该显示您的数据结构。此语法非常繁重，可以使用formatItem（）代替。如果您提供模拟数据，我将向您展示一个示例。我已经在上述代码中添加了一些静态数据。我得到了同样的行为。你应该显示你的数据结构。此语法非常繁重，可以使用formatItem（）代替。如果您提供模拟数据，我将向您展示一个示例。我已经在上述代码中添加了一些静态数据。我也有同样的行为。这似乎对我不起作用。现在我得到了ui自动完成插件的“默认”行为。结果集中的每个条目都没有链接。如果我点击一个项目，我只是将值输入到“输入字段”中，因此我尝试实现以下目标：我将键入一个搜索词并获得一个自动完成列表。使用上面的代码，我可以将鼠标悬停在每个resultlistentry上，单击它，然后重定向到另一个页面。这在与键盘交互时也是可能的，而不是与鼠标交互时。。。因此，输入单词，获取结果列表，按下按钮（箭头向下）选择一个条目，点击回车键，然后重定向到正确的页面。我得到一个远程jsonstring，它的程序集是：{'keytitle'，'1234'}。因此，listresult应该用keytitle标记，但链接到id为1234Hi的页面，感谢您的ado，但不知何故，这与我上面代码中的行为不同。在我的代码中，每个条目代表一个链接（），单击它可以进入正确的页面。我得到的jsonstring是{'keytitle'，'1234'}。在上面的代码中：item.value的计算结果为“1234”，item.label的计算结果为“keytitle”。但是现在如何获取“item”变量呢？请检查redirect（）函数的参数。否则，您可以检查$（input）.val（）或在click（）事件中添加一个属性。嗯，我没有得到它：下面是我得到的响应数据的概要：{“label”：“Tosca”，“value”：“605243”，“thumb”：“}。如何调用now label获取“Tosca”，或调用value获取“60..”或调用thumb获取此值？这似乎对我不起作用。现在我得到了ui自动完成插件的“默认”行为。结果集中的每个条目都没有链接。如果我点击一个项目，我只是将值输入到“输入字段”中，因此我尝试实现以下目标：我将键入一个搜索词并获得一个自动完成列表。使用上面的代码，我可以将鼠标悬停在每个resultlistentry上，单击它，然后重定向到另一个页面。这在与键盘交互时也是可能的，而不是与鼠标交互时。。。因此，输入单词，获取结果列表，按下按钮（箭头向下）选择一个条目，点击回车键，然后重定向到正确的页面。我得到一个远程jsonstring，它的程序集是：{'keytitle'，'1234'}。因此，listresult应该用keytitle标记，但链接到id为1234Hi的页面，感谢您的ado，但不知何故，这与我上面代码中的行为不同。在我的代码中，每个条目代表一个链接（），单击它可以进入正确的页面。我得到的jsonstring是{'keytitle'，'1234'}。在上面的代码中：item.value的计算结果为“1234”，item.label的计算结果为“keytitle”。但是现在如何获取“item”变量呢？请检查redirect（）函数的参数。否则，您可以检查$（input）.val（）或在click（）事件中添加一个属性。嗯，我没有得到它：下面是我得到的响应数据的概要：{“label”：“Tosca”，“value”：“605243”，“thumb”：“}。如何调用now label获取“Tosca”，或调用value获取“60..”或调用thumb获取此值？

// Your list of links
var redirectLinks = {'Ruby': '1234.com', 'Asp': '1235.com'};
function redirect(url) {
  // TODO implement window.location=url or whatever you like
  if(redirectLinks[url] != undefined) {
    alert('redirecting to '+url+' => '+redirectLinks[url]);
  }
}

$('.searchfield').each(function () {
  $(this).autocomplete(availableTags, { 
    minLength: 1,
    change: function(event, ui) {
      console.log('this change event doesnt seem to be fired');        
    },
    select: function(event, ui) {
      console.log('this select event doesnt seem to be fired');        
    }
  });
  // After the list construction
  $(this).keyup(function(e){      
    if (e.which == 13) { // typing enter validates the input => autocompletechange
      console.log('validating input '+$(this).val());    
      redirect($(this).val());
    }  
    var $list = $('.ac_results:first ul').find('li');
    $list.click(function() { // adding an event on suggestion => autocompleteselect
      console.log('clicking on suggestion '+$(this).text());    
      redirect($(this).text());
    });
  }); 


});