2013-06-25 5 views
1

사용자 이름에 @ 및 href 트리거를 사용하여 사용자 이름을 만들어 해당 프로필 페이지에 연결하려고합니다. 방금 ​​PHP 스크립트를 만들었지 만 잘 작동하지만 jQuery에 대한 많은 경험이 없으므로 내 문제는 사용자 이름에 URL을 추가하는 방법을 모르겠다는 것입니다.AutoSuggest 및 트리거에 대한 attr 추가 @

사용자가 @user .....을 입력 할 때 jQuery가 활성화되고 autosuggest가 표시되면 @user ..를 입력 할 때도 페이스 북과 같은 링크가 있어야합니다. 감사합니다 그리고 난 다음 jQuery를에 대해 많은 것을 배울 수

$(function() { 

    //autocomplete 
    $("#username").autocomplete({ 
     $("#username").attr('href'), 
     source: "hassearch.php", 
     minLength: 1 
    });    

}); 

그러나 그것은 전혀 아니다는 jQuery로 올바른 방법으로 어떻게 작동하는지 당신이 나를 도울 수 있다면, 작동 : 무엇 내가 지금했던 것은!

업데이트 : 이상적인 jQuery 코딩을 발견했습니다 : Implementing jquery UI autocomplete to show suggestions when you type "@" -하지만 지금 내 질문은 어떻게 데이터베이스에서 사용자를 얻으려면 PHP 파일을로드 할 수 있습니까?

내가 태그 PHP 파일을로드 할 :

var availableTags = [--> to load php file <--]; 

function split(val) { 
    return val.split(/@\s*/); 
} 

function extractLast(term) { 
    return split(term).pop(); 
} 

$("#tags") 
// don't navigate away from the field on tab when selecting an item 
.bind("keydown", function(event) { 
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) { 
     event.preventDefault(); 
    } 
}).autocomplete({ 
    minLength: 0, 
    source: function(request, response) { 
     var term = request.term, 
      results = []; 

     /* If the user typed an "@": */ 
     if (term.indexOf("@") >= 0) { 
      term = extractLast(request.term); 
      /* If they've typed anything after the "@": */ 
      if (term.length > 0) { 
       results = $.ui.autocomplete.filter(
       availableTags, term); 
      /* Otherwise, tell them to start typing! */ 
      } else { 
       results = ['Start typing...']; 
      } 
     } 
     /* Call the callback with the results: */ 
     response(results); 
    }, 
    focus: function() { 
     // prevent value inserted on focus 
     return false; 
    }, 
    select: function(event, ui) { 
     var terms = split(this.value); 
     // remove the current input 
     terms.pop(); 
     // add the selected item 
     terms.push(ui.item.value); 
     // add placeholder to get the comma-and-space at the end 
     terms.push(""); 
     this.value = terms.join(""); 
     return false; 
    } 
}); 

답변

0

그냥 당신이 도입 한 솔루션을 상세히 말하다하기 :

jQuery를 UI 자동 완성의 source 옵션 품목이 포함 된 배열을 지정하는 데 사용됩니다

위젯이 트리거되면 드롭 다운 목록에 표시됩니다. 배열, 그러한 배열을 반환하는 함수 또는 이러한 배열을 생성하는 리소스에 대한 URL로 정의 할 수 있습니다.

궁극적으로 source의 값이되는 배열이 비어 있으면 위젯에 드롭 다운 목록이 표시되지 않습니다. 따라서 source@이 입력 된 경우에만 비어 있지 않은 배열 을 반환 할 수있는 함수로 정의하면 위젯이 원하는대로 동작합니다. 그리고 그 함수가 있기 때문에 어쨌든 원하는 배열을 얻을 수 있습니다. 예를 들어 ajax 호출에서 얻은 것을 포함하여 원하는 모든 데이터를 사용하여 PHP 파일로 전송할 수 있습니다.). 당신이 언급 생성 및 관리 기능 (A 언급를 제공하기 위해 이러한 기능을 사용합니다 기존 제품을 찾는 경우

확인 Mentionator는 자동 완성으로 만들려고하고있는 무슨의 단일 인스턴스이다)뿐만 아니라 유용한 보조 기능을 제공합니다. 당신에 의해 진정 유지됩니다 :).

관련 문제