在jQuery UI Autocomplete中使用if语句

时间:2014-05-03 14:41:30

标签: javascript jquery html ajax jquery-ui

是否可以在response事件和渲染项目实现中设置if语句?我有两个json文件,并使用#searchbox.searchbar中的数据属性来获取网址。由于文件对象不同,我认为我需要使用两种不同的响应和标记。我可以设置开关声明或if语句如下吗?我在代码中遇到了某种未定义的错误。

Uncaught TypeError: undefined is not a function jquery.js:9597

我可以看到正在返回json文件,但自动完成功能没有显示出来。有什么建议吗?

HTML

<input type='text' data-search="jsonfileA" id="searchbox">
<input type='text' data-search="jsonfileB" class="searchbar">

代码:

$( "#searchbox,.searchbar" ).each(function(){
    var search = $(this).data('search');
    $(this).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: search,
                dataType:"json",
                data:{q:request.term},
                success: function( data ) {
                 response($.map(data.products, function( item)
                   { 
                    if ($(this).is('#searchbox')) {
                       return {
                        label:item.name,
                        category:item.category
                        }
                   }else {
                       return { 
                       title:item.title,
                       description:item.description
                       }
                    }  
                   });
                 )};
            });
        }
    })
    .data("ui-autocomplete")._renderItem = function(ul, item) {
        var inner_html;
        if ($(this).is('#searchbox')) {  
            inner_html = ''+item.label+'<p>'+item.category+'';
        }
        else {
            inner_html = ''+item.title+'<p>'+item.description+'';
        }
        return $("<li></li>")
        .data("item.autocomplete", item)
        .append(inner_html)  
        .appendTo(ul);
    };
});

1 个答案:

答案 0 :(得分:1)

var $this = $(this)函数中声明.each,然后使用$this引用input.each函数中的自动填充.ajax

Fiddle example

$( "#searchbox,.searchbar" ).each(function(){

    var $this = $(this), // declared here
        search = $this.data('search'); // used here

    $this.autocomplete({ // used here
        source: function( request, response ) {
            $.ajax({
                url: search,
                dataType:"json",
                data:{q:request.term},
                success: function( data ) {
                 response($.map(data.products, function( item)
                   { 
                    if ($this.is('#searchbox')) { // used here
                       return {
                        label:item.name,
                        category:item.category
                    }
                   } else { 
                   // rest of your code - replace any remaining references to the autocomplete input with $this