jquery自動完成 - 返回並格式化多個元素

那裏的教程描述完全不同的方式來使用jquery/ui自動完成的數量是驚人的。想要找到正確的方法非常困難，爲什麼你應該這樣做，以及如何改進。jquery自動完成 - 返回並格式化多個元素

我只能使用1個元素就能正常工作，但現在需要更多。

爲了簡單起見，我只是從mySQL返回2個元素（group_list.name和group_list.description）。我想以某種方式通過自動完成將它們顯示在一起！我希望這很容易！

HTML：

<form method="POST" url="<?php echo base_url() ?>/blurb/main/search" action="welcome/find_group"> 
    <input type="text" id="find_group" name="find_group" placeholder=" Find Group"></input> 
    <input type="image" id="image" src="<?php echo base_url() ?>img/board/icons/add.jpg" id="homeSubmit" value="X"></input> 
</form>

JS：

$(function() { 
$("#find_group").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
      url: "welcome/search/", 
      data: { term: $("#find_group").val()}, 
      dataType: "json", 
      type: "POST", 
      success: function(data){ 
       var resp = $.map(data,function(obj){ 
        return obj.name; 
       }); 
       response(resp); 
      } 
     }); 
    }, 
    minLength: 1 
    }); 
});

PHP：

控制器（歡迎/搜索）

public function search() 
    { 
     $term = $this->input->post('term', TRUE); 
     $this->nav_model->autocomplete($term); 
    }

模型 - >自動完成：

public function autocomplete($term) 
{ 
    $term = $this->page_model->trimfilter($term); 
    $query = $this->db->query("SELECT g.name, g.description FROM group_list g 
           WHERE g.name LIKE '".$term."%' 
           GROUP BY g.name 
           LIMIT 0, 5"); 
    echo json_encode($query->result_array()); 
}

來源

2012-07-27 Ricky Mason

請再具體些。返回的JSON是什麼樣的？試圖顯示名稱和說明時遇到了什麼具體問題？ – 2012-07-27 15:04:15

不幸的是，這個問題是我不知道如何顯示名稱和描述。：\。 JSON看起來像任何encodedjson會看起來，只是名稱：'name'|描述：'描述'。 – 2012-07-27 16:33:41

在你的Ajax成功功能嘗試是這樣的：

success: function(data) { 
     response($.map(data, function(obj) { 
      return { 
      label: obj.description, 
      value: obj.name, 
      id: obj.name 
      }; 
     })); 
    }

來源

2012-07-27 15:14:19

謝謝，這是在自動完成期間顯示描述，然後一旦點擊，它將名稱放在輸入框中。到達那裏..只需要調整格式似乎？ – 2012-07-27 16:42:40

是的。「標籤」就是您在列表中看到的內容，「值」是一旦點擊就進入輸入框的內容。使用這個：'label：obj.name，value：obj.name +''+ obj.description，'一旦選擇，你將在列表中獲得名稱並且獲得「名稱描述」。 – 2012-07-27 17:40:25

太棒了！謝謝。 – 2012-07-27 17:48:33

jquery自動完成 - 返回並格式化多個元素

回答

相關問題