2013-12-16 3 views
1

Я работаю над автозаполнением jQuery, который как два элемента в <ul>.jQuery автозаполнение с несколькими элементами не работает

Я получаю пункт JSon от функции $ .getJSON и объект JSON выглядит следующим образом:

[{ 
    "merchant_name": "Myntra", 
    "merchant_details": "Flat Rs.225 Cashback" 
}, { 
    "merchant_name": "Adlabs imagica", 
    "merchant_details": "Rs 170 per sale" 
}, { 
    "merchant_name": "godaam", 
    "merchant_details": "Rs 140 per sale" 
}, { 
    "merchant_name": "Homeshop18", 
    "merchant_details": "Upto 8% Cashback" 
}] 

Моя функция выглядит следующим образом:

$('#search_bar').keyup(function(e) { 
    var searched = $('#search_bar').val() 
    $.getJSON('<?php echo base_url();?>get_data', 'title=' + searched, function(result) { 
     var elements = []; 
     $.each(result, function(i, val) { 
      elements.push({ 
       'merchant_name': val.merchant_name, 
       'merchant_details': val.merchant_details 
      }) 
     }) $('#search_bar').autocomplete({ 
      delay: 0, 
      source: elements, 
      select: function(event, ui) { 
       $("input#search_bar").val(ui.item.merchant_name + "/" + ui.item.merchant_details); 
       $("#get").click(); 
      }.data("autocomplete")._renderItem = function(ul, item) { 
       return $("<li></li>").data("item.autocomplete", item).append("<a><strong>" + item.merchant_name + "</strong>/" + item.merchant_details + "</a>").appendTo(ul); 
      }; 
     }) 
    }) 
}); 

Я не смог продолжить вперед.

Пожалуйста, помогите мне решить эту проблему.

+0

Ваша функция выглядит так, как будто она делает много вещей в один раз, возможно, абстрактно из нескольких вещей и заставить ее работать? Ваша автозаполнение позаботится о обнаружении события нажатия клавиши, а также о поиске ответов с вашего сервера, если это то, что вы пытаетесь выполнить. – Mark

+0

Мне нужно получить json, используя метод get. Поэтому я использую функцию keyup. Я действительно сомневаюсь в этой строке $ ("input # search_bar"). Val (ui.item.merchant_name + "/" + ui.item.merchant_details); Элементы - это объекты. поэтому я не могу получить ui.item.merchant_details. Есть ли другой способ сделать это –

+1

Почему вы не можете позволить автозаполнению получать информацию, которая будет отображаться для пользователя? – Mark

ответ

0

Я написал это для одного из моих проектов, и он отлично работает. Я не уверен, почему вы обнаруживаете keyup, когда автозаполнение делает это для вас ... Но этот фрагмент должен предоставить вам всю необходимую функциональность.

$("#edit_profile .location").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: BASE_URL + "lib/ajax.php", 
       type: "GET", 
       data: "autocomplete_location=1&term=" + request.term, 
       cache: false, 
       success: function(resp) { 
        try { 
         json = $.parseJSON(resp); 
        } catch (error) { 
         json = null; 
        } 
        // 
        if (json && json.status == "OK") { 
         // 
         response($.map(json.predictions, function(item) { 
          return { 
           label: item.description, 
           value: item.description 
          } 
         })); 
         // 
        } 
       } 
      }); 
     }, 
     minLength: 1, 
     change: function (event, ui) { 
      if (!ui.item){ 
       $(this).val(""); 
      } 
     } 
    }); 
Смежные вопросы