jQuery 자동 제안 배열 스타일링

검색 양식 중 하나에서 간단한 jQuery 자동 제안을 사용하지만 스타일을 쉽게 만들 수있는 방법에 대해서는 잘 모르겠습니다.jQuery 자동 제안 배열 스타일링

**name** **(age)** - **state** 
John  (66)  - here 
Jack  (36)  - there 
Jason (46)  - here 
Jimmy (56)  - there

: 내가 좋아하는 미리 정의 된 폭과 그것에서 테이블의 일종을 만들고 싶어하지만

**name** **(age)** - **state** 
John (66) - here 
Jack (36) - there 
Jason (46) - here 
Jimmy (56) - there

: 순간에 어떻게됩니까

는이 같은 결과를 표시, 입니다 현재 데이터를 수집하는 배열은 다음과 같습니다.

$data = array(); 
if ($rs && mysql_num_rows($rs)) 
{ 
while($row = mysql_fetch_array($rs, MYSQL_ASSOC)) 
{ 
    $data[] = array(
     'label' => $row['name'] .'('. $row['age'] .') - '. $state, 
     'value' => $row['name'] 
    ); 
} 
} 
echo json_encode($data); 
flush();

Bes http://jqueryui.com/demos/autocomplete/#custom-data

당신은 확인해야합니다 :이 페이지에 jQuery를 웹 사이트의 자동 완성 자습서에 설명 된대로

jQuery(document).ready(function($) 
{ 
$.widget('custom.custom_autocomplete', $.ui.autocomplete, 
{ 
    _renderMenu: function(ul, items) 
    { 
     var self = this; 
     $.each(items, function(index, item) 
     { 
      var li = self._renderItem(ul, item); 
     }); 

     $(ul).addClass('sis'); 
    } 
}); 

$('#sis').custom_autocomplete({ 
    minLength:1 , 
    source:'autocomplete.php' , 
    selectFirst:true 
}); 
});

출처

2012-08-05 Sjaak piraat

'_renderItem'을 확장하고 이름, 나이 및 상태를'span '에서 개별적으로 감싸 십시 오. 그것들을'display : inline-block; 너비 : 100px;' –

정확하게 어떻게하는지에 대한 단서가 있습니까? 나는 정말로 자바 스크립트로 그 모든 신선한 아니에요? 어딘가에 어떤 예가 있습니까? 나는 그냥 ul, item, span을 추가하고 span을 사용할 수 있습니까? –

그래서 위의 코드를 쓰지 않았습니까 ^^? –

당신은 자동 완성의 renderItem 기능을 사용할 수 있습니다 : 십오 여기에 데이터를 수집,이 비트는 자바 스크립트입니다

다음에이 새로운 구조

당신의 응답 JSON을 변경

: 당신 그러나 코드에서 몇 가지 변경

$data[] = array(
'name' => $row['name'], 
'row' => $row['age'], 
'state' => $state, 
'value' => $row['name'] 
);

다음으로는 자동 완성 _renderItem를 사용하여 자바 스크립트 코드를 변경해야

그것은 마지막을 지원하도록 CSS 파일에 다음 CSS 코드를 추가이

$("#sis").autocomplete({ 
      minLength: 0, 
      source: autocomplete.php, 
     }) 
     .data("autocomplete")._renderItem = function(ul, item) { 
      return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<p><span class='width100'>" + item.name + "</span><span class='width100'>(" + item.age+ ")</span><span class='width100'>-" + item.state+ "</span></p>") 
       .appendTo(ul); 
     };

처럼 보일 것입니다() 함수 너비

p.width100{ 
    width: 100px; 
    padding: 5px 0; 
    text-align: center; 
}

결국 원하는 결과가 나타납니다. 필요에 따라 CSS를 편집 할 수 있습니다.

출처

2012-09-27 13:06:16

jQuery 자동 제안 배열 스타일링

답변

관련 문제