CI 묻고 답하기

제목 autocomplete을 ajax로 보내서 사용할려고 하는데 잘 안되네요.
글쓴이 lzao 작성시각 2014/04/16 19:53:18
댓글 : 5 추천 : 0 스크랩 : 0 조회수 : 18474   RSS

$.post("http://www.test.com",{id:id},function(data){
        var i = 0;
        var availableTags = [data];
        alert(availableTags);
        $("#name_"+i+"").autocomplete({
            source: availableTags
        });
    });

이런식으로 autocomplete을 사용하고 싶은데 그냥 검색이 되지 않고 모두 나옵니다.

"aaa","bbb","ccc","ddd","eee" 이런식으로 한칸으로요

어떻게 해야 하나요?? 
 다음글 db 에러 관련 질문이요! (5)
 이전글 허접한 게시판 질문 하나 드려도 될까요??? (3)

댓글

한대승(불의회상) / 2014/04/16 20:06:32 / 추천 0
데이터 타입이 json 이라면
 
    $.post("http://www.test.com",{id:id},function(data){
        var i = 0;
        var availableTags = [data];
        alert(availableTags);
        $("#name_"+i+"").autocomplete({
            source: availableTags
        });
    }, 'json');
'json'을 추가로 붙여 주세요.
lzao / 2014/04/17 09:36:36 / 추천 0
이것저것 다해보고 그냥 source : data 이런식으로 했거든요 그랬더니 에러가

The URI you submitted has disallowed characters.

이렇게 뜨네요......... 검색해봐도 안나오고 도와주세요 ㅠ
한대승(불의회상) / 2014/04/17 10:23:18 / 추천 0
데이터가 json 이라면  출력 할 때 json_encode() 함수를 사용하시면 됩니다.

"The URI you submitted has disallowed characters." 에러는 url에 사용 할 수 없는 특수문자나 한글이 있을때 나오는 에러 입니다.

특수문자나 한글은 POST 방식으로 넘겨주시거나 포럼에서 한글 검색해 보시면 됩니다.

 
letsgolee / 2014/04/18 08:51:10 / 추천 0
저도 회사에서 사용하는 프로그램을 짜면서 autocomplete을 만들면서 애를 많이 먹었습니다. 인터넷에서도 그 자료가 그다지 많지 않았습니다. 지금은 응용해서도 쓰고 있는데 다음이 관련 예제입니다.
 
 $('#customer').autocomplete({
  minLength: 2,
  source: function(request, response) {
   $.ajax({
    type: 'POST',
    url: '<?php echo site_url("daily_tasks/ajax/get_customer_list");?>',
    dataType: 'json',
    data: {
     customer: request.term
    },
    success: function(data) {
     response($.map(data, function(item){
      return {
       label: item,
       value: item
      };
     }))
    }

   });
  }
 });
예제를 설명합니다:
1. 먼저 customer로 id가 설정된 text input이 있습니다. 여기에 autocomplete()을 지정했습니다.
2. 검색을 위한 최소 글자가 있어야 겠죠. 그게 minLength입니다. 예제에서는 최소 두 글자가 됩니다. 한글도 두 글자입니다. 
3. 검색에 필요한 소스가 있어야 겠죠. 그게 source로 지정됩니다. 소스에서 필요한 건 request와 response입니다. 이건 그냥 적으면 됩니다. 소스는 ajax로 가져오도록 되어 있죠?
    (1) ajax로 소스를 가져오기 위해 저는 post method를 사용했습니다.
    (2) 그다음 가져올 url을 적어줍니다. 주의할 것은 그 url에서는 json_encode()를 이용하든 어찌하든간에 json형태로 소스를 보내야 합니다. 예제의 경우 당연히 배열을 보내야겠죠. 만일 model에서 가져온 소스가 다음과 같은 형태로 있다고 합시다:
        $data = array(1=>'aaa', 2=>'bbb',3=>'ccc');
         그럼 위에서 적어준 url에서는 echo json_encode($data);와 같은 방식으로 해서 소스를 보내줍니다.
    (3) dataType은 json으로 지정했습니다.
    (4) 그다음 url에서 무엇을 받을지 정해주어야 하므로 data가 필요합니다. 지정된 url에서는 post 방식으로 customer를 받게 됩니다. 그리고 그 값으로 위에서 적었던 request가 사용되는 것을 봅니다. request.term값이 우리가 검색하고자 하는 값으로 자동으로 들어갑니다.
    (5) ajax송신을 한 후 성공하였을 때 처리는 success에서 하게 됩니다. url에서 보내주는 값이 data로 넘어오는데 이미 json처리가 되어 있습니다. 이 값을 위에서 적어준 response 함수로 처리가 됩니다. 따라서 이것은 그냥 적는다고 생각하면 됩니다.
    (6) response 함수에서 우리가 원하는 형태로 select화 하기 위해 label과 value값을 정하는 것을 봅니다. label은 화면상에서 보이는 값이고 value는 그 값을 선택했을 때 실제로 주어지는 값입니다. 예를 들어 <option value="1">aaa</option>이라 하면 label은 aaa가 되는 것이고 value는 1이 됩니다. 위의 예제에서는 단일 배열로 url에서 넘어오므로 label과 value값이 모두 동일한 item으로 왔습니다. 이것은 <option value="aaa">aaa</option>과 같이 value값과 label값이 동일한 예입니다. 그런데 가끔 다르게 쓰고 싶을 때가 있죠? 그게 응용입니다. 응용을 하려면 먼저 url에서 위에서 단순 배열을 보내는 것이 아니라 연관배열의 형태로 보내야 합니다. 예를 들어 echo jason_encode(array(1=>array('label'=>'1', 'value'=>'aaa'), 2=>array('label'=>'2', 'value'=>'bbb'),3=>array('label'=>'3', 'value'=>'aaa'))); 이렇게 url에서 보내주면 response에서는 return을 다음과 같이 지정하면 됩니다:
    return { lable: item.label, value: item.value};
    이렇게 되면 <option value="1">aaa</option>과 같은 형태를 갖게 할 수 있습니다.

이해가 안되면 테스트하면서 하면 될 겁니다.
이상.
         
lzao / 2014/04/18 09:06:48 / 추천 0
답변해주신 한대승(불의회상) 님,letsgolee  님 모두모두 감사합니다.^^