개발 Q&A

제목 네이버검색어처럼 보이게하기..;;
글쓴이 템포 작성시각 2012/10/24 14:30:42
댓글 : 8 추천 : 0 스크랩 : 0 조회수 : 22193   RSS
네이버검색어처럼 보이게하기..

1 - 로그인 후, 각 유저 아이디로 검색했던 기록 10개정도를 끊어서 보여줄려고 했습니다.
( 유저 아이디가 없으면 그냥 검색값이없는상태 - 아무런 변화 없음 )

2 - (유저든 유저가 아니든)공통적으로 어떤 값을 입력할 때, js파일을 하나 만들어놓고
거기서 배열에 있는 값을 가져오게 했습니다 . (ex 자 -> 자전거, 자동차, 주전자, 팔자 .. 등)

네이버 검색어처럼 이쁘게 보이진 않지만 2번째는 잘 보여지고 잘 나오는 상태입니다.
(파폭에서는 방향키를 아래로 해야 나오더군요.. IE에서는 글자를 적을 때 마다 포함하는 값이 있는지 체크해서 나오는데..)

그런데.. 1번에서 질문입니다. ajax를 이용해서 데이터를 다 가져오는데
해당 데이터를 어떻게 뿌려줘야할지모르겠습니다.
이 데이터를 주기전에 js 파일에 배열로 추가해서 (배열 변수를 ID) 들어가게 한다 배열변수와 넘어온 아이디를 비교해서
맞으면 데이터를 뿌려주게 할 수도 있나요 ??
if(msg.result == 'OK')
    {
     var c_time  = msg.data.create_time;
     var c_month = c_time.split("-");  // c_month[1]   -> 월
     var c_day = c_month[2].split(" "); // c_day[0]  -> 일
     
     var search_key = msg.data.s_keyword;
     var search_day = c_month[1]+'.'+c_day[0];
     
     // 화면 하단 부분에 검색 목록이 나오게 하기
    }
현재 jquery에서 데이터를 받아오는 부분이 이런데

제가 2번에서 사용햇던 방법은

$("#suggest2").autocomplete(items, {
    minChars : 0,
    max : 30,
    autoFill : false,
    mustMatch : true,
    matchContains : true,
    scrollHeight : 220

  });
이렇습니다. suggest는 input text 의 ID값입니다

var items  = ["곰", "호랑이", "드래프트", "볼트", "라이트", "백 라이트", "드래프트 라이트", "치타", "불곰"];

2번처럼 나오게 할려면 1번부분에 어디를 손봐줘야하나요 ? (2번 실행했을 때, 화면만 알집으로 올렸습니다)


ps. 웅파님이 조언해주신대로 jquery suggestion search 통해서 찾아봤는데 제가 잘 못찾아서 그런지
대부분 사이트들이 2번 형식을 사용했었습니다. 2번형식으로만으로도 사용이 가능하긴 할테지만
좀 더 나은 형태로 만들어보고싶어서 다시 질문드립니다

첨부파일 2번실행.zip (3.4 KB)
 다음글 위키 어떤거 쓰세요? (2)
 이전글 이게 왜 안되는걸까요? 뷰 전환~ (2)

댓글

milosz / 2012/10/24 15:28:16 / 추천 0
 여기서 설명드리기엔 복잡하네요. jquery의 autocomplete 는 이 게시판서 간단하게
설명드릴 수 있는 수준이 아니라서요.
직접 구현하시려면 autocomplete lite jquery 이런거 검색하셔서 분석해보세요 ^^

 
템포 / 2012/10/24 18:08:41 / 추천 0
milosz  답변 감사합니다
검색해서 테스트해보고있긴한데 이상하네요..

$('#birds').autocomplete({
            source : "controller"
        });

검색해서 참고해보니 jquery부분에서 이렇게 나오는데 ..
저기서 따로 저 부분을 실행해주는 부분이 없는데 어째서 저게 동작이 된다는건지 이해가 안가네요;;;
한대승(불의회상) / 2012/10/24 20:53:34 / 추천 0
ㅎㅎㅎ

일단 CI로 ajax Controller를 하나 만들어 주세요.

ajax_autocomplete.php
<?php
class Ajax_autocomplete extands CI_Controller {
  function index() {
    echo json_encode(array('곰', '호랑이'));
  }
}
뭐 이런식으로...

그리고 요렇게 함 해보세요.

$('#birds').autocomplete({
  source : "/ajax_autocomplete"
});
잘 된다면 왜 잘되는지 분석해 보세요.

돌려 보진 않았지만 대충 이렇게 하면 될듯...
템포 / 2012/10/25 08:30:53 / 추천 0
불의회상 / 답변감사합니다.

조언해주신대로 controller ->

<?php
echo "hhh";
 class Ajax_autocomplete extends CI_Controller {
  function index()
  {
   echo json_encode(array('곰', '호랑이'));
  }
 }
?>
이렇게 담아놓구요

js 스크립트에

 $('#birds').autocomplete({
   source : "/ajax_autocomplete"
  });
이렇게 담았는데 ajax_autocomplete 페이지가 실행이 처음부터 안되는것같습니다ㅠ
위에 echo는 컨트롤러 안이나 밖이나 다 찍어봤는데 넘어가질 않는거같아요 ㅠ

헛발이 / 2012/10/25 08:56:18 / 추천 0
템포 / 2012/10/25 09:10:51 / 추천 0
$('#birds').focus().autocomplete("ajax_autocomplete", {
            selectFirst : true
  });

jquery부분에서 이렇게 잡아놓고 컨트롤러가 해당하는 폴더에 넣으니 됩니다.

헛발이님, 불의회상님 감사합니다 ㅠㅠ

이제 한글처리만하면되네요 ㅎㅎ
한대승(불의회상) / 2012/10/25 09:45:03 / 추천 0
ㅎㅎㅎ 한글은 헤더값 조정해 주시면 됩니다.

당연히 header() 함수를 사용하셔야 합니다. (혹시나 하고...)

템포 / 2012/10/25 11:31:20 / 추천 0
답변 감사합니다 ㅎㅎ

조금 다른 질문이긴한데...한가지만 더 여쭤볼게요
네이버에 보면 검색창을 클릭했을 때, 검색도중 검색창을 비웠을 때..
로그인한계정으로 이전 검색목록이 뜨잖아요

autocomplete를 사용해보니.. 검색창에 text값이 입력이 되었을 때, 해당 autocomplete가 실행이되서 나오더라구요. 빈값일 때 조건을 주고 그 안에넣어도 결국엔 text값이 들어가야 실행이 되던데..

http://translate.google.co.kr/translate?hl=ko&langpair=en|ko&u=http://docs.jquery.com/Plugins/Autocomplete/autocomplete

여기서  참고했을 때, 어떤 속성 지정문제는 아닌걸로 생각이되어서 질문드립니다