jQuery autoComplete 클릭시 모두보기?
비교적 간단한 방법으로 jQuery의 자동 완성을 사용하고 있습니다.
$(document).ready(function() {
var data = [ {text: "Choice 1"},
{text: "Choice 2"},
{text: "Choice 3"} ]
$("#example").autocomplete(data, {
matchContains: true,
minChars: 0,
formatItem: function(item)
{ return item.text; }
}
);
});
자동 완성에 사용할 수있는 모든 선택 항목을 표시하는 onclick 이벤트 (예 : 버튼 또는 링크)를 어떻게 추가합니까? 기본적으로 자동 완성과 선택 / 드롭 다운 요소의 하이브리드를 만들고 싶습니다.
감사!
문서에서이를 수행하는 명백한 방법을 볼 수 없지만 자동 완성이 활성화 된 텍스트 상자에서 포커스 (또는 클릭) 이벤트를 트리거 해보십시오.
$('#myButton').click(function() {
$('#autocomplete').trigger("focus"); //or "click", at least one should work
});
이 이벤트를 트리거하여 모든 옵션을 표시 할 수 있습니다.
$("#example").autocomplete( "search", "" );
또는 아래 링크의 예를 참조하십시오. 정확히 당신이하고 싶은 것 같습니다.
http://jqueryui.com/demos/autocomplete/#combobox
편집 (@cnanney에서)
참고 : 모든 요소를 반환하려면 빈 검색 문자열에 대해 자동 완성에서 minLength : 0을 설정해야합니다.
나는 이것이 가장 잘 작동한다는 것을 알았다
var data = [
{ label: "Choice 1", value: "choice_1" },
{ label: "Choice 2", value: "choice_2" },
{ label: "Choice 3", value: "choice_3" }
];
$("#example")
.autocomplete({
source: data,
minLength: 0
})
.focus(function() {
$(this).autocomplete('search', $(this).val())
});
레이블을 검색하고 값을 $ (# example) 요소에 배치합니다.
모든 항목을 표시하고 콤보 상자 동작을 시뮬레이션하려면 먼저 minLength 옵션을 0 (기본값은 1)으로 설정했는지 확인해야합니다. 그런 다음 클릭 이벤트를 바인딩하여 빈 문자열로 검색을 수행 할 수 있습니다.
$('inputSelector').autocomplete({ minLength: 0 });
$('inputSelector').click(function() { $(this).autocomplete("search", ""); });
해결 방법 : 포커스 이벤트에 jquery ui 자동 완성 목록 표시
두 번 이상 작동하도록하는 솔루션
<script type="text/javascript">
$(function() {
$('#id').autocomplete({
source: ["ActionScript",
/* ... */
],
minLength: 0
}).focus(function(){
//Use the below line instead of triggering keydown
$(this).data("autocomplete").search($(this).val());
});
});
이 시도:
$('#autocomplete').focus(function(){
$(this).val('');
$(this).keydown();
});
및 MINLENGTH는 설정 0
매번 작동합니다 :)
$j(".auto_complete").focus(function() { $j(this).keydown(); })
당신은 있어야합니다 설정 minLength에 제로 이 작품을 만들기 위해! 다음은 작동 예입니다.
$( "#dropdownlist" ).autocomplete({
source: availableTags,
minLength: 0
}).focus(function() {
$(this).autocomplete('search', $(this).val())
});
});
이것이 나를 위해 일하는 유일한 것입니다. 목록은 매번 표시되며 선택시 닫힙니다.
$("#example")
.autocomplete(...)
.focus(function()
{
var self = this;
window.setTimeout(function()
{
if (self.value.length == 0)
$(self).autocomplete('search', '');
});
})
이것을 사용할 수 있습니다.
$("#example").autocomplete( "search", $("#input").val() );
이것은 모든 옵션을 보여줍니다 : "%"(아래 참조)
중요한 것은 아래 예제와 같이 이전 #example 선언 아래에 배치해야한다는 것입니다. 알아내는 데 시간이 걸렸습니다.
$( "#example" ).autocomplete({
source: "countries.php",
minLength: 1,
selectFirst: true
});
$("#example").autocomplete( "search", "%" );
이것이 누군가에게 도움이되기를 바랍니다.
$('#id')
.autocomplete({
source: hints_array,
minLength: 0, //how many chars to start search for
position: { my: "left bottom", at: "left top", collision: "flip" } // so that it automatically flips the autocomplete above the input if at the bottom
})
.focus(function() {
$(this).autocomplete('search', $(this).val()) //auto trigger the search with whatever's in the box
})
<input type="text" name="q" id="q" placeholder="Selecciona..."/>
<script type="text/javascript">
//Mostrar el autocompletado con el evento focus
//Duda o comentario: http://WilzonMB.com
$(function () {
var availableTags = [
"MongoDB",
"ExpressJS",
"Angular",
"NodeJS",
"JavaScript",
"jQuery",
"jQuery UI",
"PHP",
"Zend Framework",
"JSON",
"MySQL",
"PostgreSQL",
"SQL Server",
"Oracle",
"Informix",
"Java",
"Visual basic",
"Yii",
"Technology",
"WilzonMB.com"
];
$("#q").autocomplete({
source: availableTags,
minLength: 0
}).focus(function(){
$(this).autocomplete('search', $(this).val())
});
});
</script>
http://jsfiddle.net/wimarbueno/6zz8euqe/
minChars : 0 속성을 사용하여이 문제를 해결 한 후 두 번의 클릭을 트리거합니다. (입력을 한 번 클릭하면 자동 완성이 표시됨) 내 코드
<input type='text' onfocus='setAutocomplete(this)'>
function setAutocomplete(el){
$(el).unbind().autocomplete("./index.php", {autoFill:false, minChars:0, matchContains:true, max:20});
$(el).trigger("click");$(el).trigger("click");
}
나는 완전한 것처럼 보이는 모든 대답을 보았다.
커서가 텍스트 필드에 있거나 일치하는 레이블을 클릭 할 때 목록을 얻으려면 다음 방법을 사용하십시오.
//YourDataArray = ["foo","bar"];
$( "#YourID" ).autocomplete({
source: YourDataArray
}).click(function() { $(this).autocomplete("search", " "); });
이것은 Firefox, IE, Chrome에서 잘 작동합니다 ...
$("#searchPkgKeyWord").autocomplete("searchURL",
{
width: 298,
max: 1000,
selectFirst: false
}).result(function (event, row, formatted) {
callback(row[1]);
}).focus(function(){
$(this).click(); //once the input focus, all the research will show
});
$("#example").autocomplete( "search", "" );부품을 작동 시킬 수 없었습니다 . 소스에있는 문자로 검색을 변경 한 후에 만 작동합니다. 그래서 나는 예를 들어 사용했습니다 $("#example").autocomplete( "search", "a" );.
I guess a better option is to put $("#idname").autocomplete( "search", "" ); into the onclick paramter of the text box . Since on select, a focus is put in by jquery , this can be a workaround . Dont know if it should be an acceptable solution.
I needed to do this recently and after trying a few different permutations (using onfocus, onclick of textbox etc), I finally settled on this...
<input id="autocomplete" name="autocomplete" type="text"
value="Choose Document">
<p>
<button type="submit" value="Submit" name="submit" id="submit" >
Submit
</button>
</p>
<script type="text/javascript">
$("#autocomplete").autocomplete(
{
source: '@Url.Content("~/Document/DocumentTypeAutoComplete/")' //<--ddl source
, minLength: 0 // <-- This is necessary to get the search going on blank input
, delay: 0
, select: function (event, ui)
{
if (ui.item) {
$("#autocomplete").val(ui.item.value);//<-- Place selection in the textbox
$("docForm").submit();
loadDocTypeCreatePartial(ui.item);
$("#submit").focus(); //This stops the drop down list from reopening
// after an item in the select box is chosen
// You can place the focus anywhere you'd like,
// I just chose my *submit* button
}
}
}).focus(function () {
// following line will autoselect textbox text
// making it easier for the user to overwrite whats in the
// textbox
$(this).select();
//The below line triggers the search function on an empty string
$(this).data("autocomplete").search('');
});
</script>
This opens the autocomplete ddl list on focus (Even if you have default text in your input box like I do above).
It also auto-selects the text in the text box to prevent the user from having to clear out the text.
Once an item is selected from the auto-complete list, it puts that item into the auto-complete input box and moves the focus to another control (thus preventing the auto-complete from reopening).
I plan on replacing it by adding dynamic Ajax calls to the very nice Chosen select lists with the Melting Ice upgrade when I get a chance.
I used this way:
$("#autocomplete").autocomplete({
source: YourDataArray,
minLength: 0,
delay: 0
});
Then
OnClientClick="Suggest(this); return false;"/>
function Suggest(control) {
var acControl = $("#" + control.id).siblings(".ui-autocomplete-input");
var val = acControl.val();
acControl.focus();
acControl.autocomplete("search");
You can also use search function without parameters:
jQuery("#id").autocomplete("search", "");
참고URL : https://stackoverflow.com/questions/1268531/jquery-autocomplete-view-all-on-click
'developer tip' 카테고리의 다른 글
| 문자열을 int64로 변환하는 Golang (0) | 2020.12.06 |
|---|---|
| PHPStorm이 파일을 열 때 모든 메서드 / 기능을 축소하는 방법은 무엇입니까? (0) | 2020.12.06 |
| Laravel 5 애플리케이션 키 (0) | 2020.12.06 |
| 아이콘 : 디자인 기술이없는 개발자는 어떻게 애플리케이션 아이콘을 예쁘게 보이게할까요? (0) | 2020.12.05 |
| HTTP 응답의 헤더 순서가 중요합니까? (0) | 2020.12.05 |