2012-01-09 2 views
1

에 입력 I가 완벽하게 작동 다음 JQuery와 자동 완성 코드 :JQuery와 자동 완성 - 스트립 태그를 입력

$("#autoc1").autocomplete("/autoc2.php?arg=1&category=<? echo $category_id; ?>", { 
width: 400, 
matchContains: true, 
minChars: 3, 
selectFirst: false 
}); 

내가 더 나은 더 많은 정보를 UI를 들어, automplete에서 이미지를 보여주기 위해 PHP를 사용하여 데이터를 포맷 사용자 들어, PHP 코드 : JQuery와 자동 완성 코드뿐만 아니라 입력에 <img> 태그 데이터를 추진하는 것이

$query = "SELECT $title, imageURL FROM PRprodINFO2 WHERE ((prodcatID = '$cat_id') 
      AND ($title LIKE \"%" . $_GET["q"] . "%\")) group by $title LIMIT 8"; } 

$result = mysql_query($query); 

$output_items = array(); 

while($row = mysql_fetch_array($result)) { 

$row[$title] = preg_replace('/[^\w\s].*$/', "", $row[$title]); 

$row[$title] = trim($row[$title]); 

$output_items[$row['title']] = $row['imageURL']; 

} // while 

$output_items = array_unique($output_items); 

$output = ''; 

foreach ($output_items as $title => $image) { 

$output .= '<img src='.$image.' style=max-width:50px;>'.$title."\n"; 

} 

echo $output; 

문제이다.

형식을 지정하는 방법이 있습니까? <img src=/....>이없는 입력란에 항목 제목 만 있습니까?

답변

1

읽어 당신은 특정 핵심 기능을 덮어 쓰기하여 자동 완성 플러그인을 확장하여, 주로 "분석"는 달성 할 수있다. 이 함수의 내부 버전은 반환 된 데이터의 각 행을 단순히 반복하고 객체의 배열로 "파싱"합니다. 각각의 속성은 다음과 같습니다. data - 전체 항목 값 - 기본 표시 값 결과 - 데이터 선택시 입력 요소 채우기

옵션 개체의 일부로 자체 구문 분석 함수를 전달하여이를 자동 완성으로 덮어 쓸 수 있습니다.

자동 완성 드롭 다운에 표시된 데이터를 포맷 할 수있는 "formatItem"기능을 제공해야합니다.

var acOptions = { 
    minChars: 3, 
    max: 100, 
    dataType: 'json', // this parameter is currently unused 
    extraParams: { 
     format: 'json' // pass the required context to the Zend Controller 
    }, 
     parse: function(data) { 
     var parsed = []; 
     data = data.users; 

     for (var i = 0; i < data.length; i++) { 
      parsed[parsed.length] = { 
       data: data[i], 
       value: data[i].displayName, 
       result: data[i].displayName 
      }; 
     } 

     return parsed; 
    }, 
    formatItem: function(item) { 
     return item.displayName + ' (' + item.mail + ')'; 
    } 
}; 

는 그런 다음 호출 할 수 있으며, 필요에 따라 다음과 같이 .result 통화에서 당신에 의해 이미지를 제거 할 수있는 기능 제공이 도움이

jQuery(document).ready(function($) { 
    $('#user_id') 
     .autocomplete('/path/to/ajax/data/source', acOptions) 
     .attr('name', 'display_name') 
     .after('<input type="hidden" name="user_id" id="ac_result">') 
     .result(function(e, data) { 
      $('#ac_result').val(data.uid); // remove the img here for your text field! 
     }); 
}); 

희망을!

관련 문제