jQueryの異なるタイプのオートコンプリートは、私はオートコンプリートの検索ボックスの3種類を取得しようとしています

Question

が機能していません。現在のところ、それは動作していないと私は理由が私は適切な方法でオートコンプリートのソース値の内部にvauleを設定しないと思う。本当に私はやり方を知らない。私を案内してもらえますか？

HTML：

<input type='text' title='tags' id='tags' /> 
<input type="radio" name="radioBtn" val="1" id="fistLetter"> 
<input type="radio" name="radioBtn" val="2" id="word"> 

JS：

$(document).ready(function() { 
    if($('#fistLetter').is(':checked')) { 
    alert("Searching matching from the first letter Only"); 
} 
if($('#word').is(':checked')) { 
    alert("Searching matching words Only"); 
} 
if($('#all').is(':checked')) { 
    alert("Searching all letters and words matching Only (Normal Auto Complete)"); 
} 

    $("#tags").autocomplete({ 
      autoFocus: false, 
      delay: 300, 
      minLength: 1, 
      source: './php/autocompletedatas.php', 
      select: function (event, ui) { 
       $("#tags").val(ui.item.value); 
       return false; 
      } 
     }) 
    }); 

あなたはdocumentationオートコンプリート "ソース" によると、このjsfiddle

Answer 1

と私の問題を理解することができるようになりますtypeは文字列、配列または関数です（要求、応答se（data））、あなたの例ではPHPの呼び出しの結果ではなく文字列だけを渡しています。

オートコンプリートを初期化する前に、関数内のアクションを呼び出すか、データをロードする必要があります。

このjsfiddlesは、どのように行われるかを示しています。

HTML：

autocomplete data: <div id="output"></div> 

<div id="main" style="display: none"> 
<br /> Regex type: <div id="regexType"></div> 
<br /><input type='text' title='tags' id='tags' disabled='true' value='Select an option first'/> 
fistLetter: <input type="radio" name="radioBtn" val="1" id="fistLetter"> 
word: <input type="radio" name="radioBtn" val="2" id="word"> 
all: <input type="radio" name="radioBtn" val="3" id="all"> 
</div> 

JS：

$(document).ready(function() { 

/***jsfiddle /echo/json/ data mock****/ 
var mock = { tags: [ "javascript", "java" , "php", "coldfusion"] }; 
var dataResult; 
$.ajax({ 
    url: '/echo/json/', 
    type: 'POST', 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json', 
    data: {json: JSON.stringify(mock) }, 
    success:function(data){ 
     $('#output').html(JSON.stringify(data)); 
     dataResult = data.tags 
     $('#main').show(100) 
     }, 
    error: function() { 
    $('#output').html('Bummer: there was an error!'); 
    } 
}); 
/*******/ 

var regex; 
$('input[type=\'radio\']').on('click',function(){ 

    $('#tags').val(''); 
    $('#tags').removeAttr('disabled'); 

    var regexType; 
    if($('#fistLetter').is(':checked')) { 
     $('#output').html("Searching matching from the first letter Only"); 
    regexType = 'first' 
    } 
    else if($('#word').is(':checked')) { 
     $('#output').html("Searching matching words Only"); 
    regexType = 'word' 
    } 
    else if($('#all').is(':checked')) { 
     $('#output').html("Searching all letters and words matching Only (Normal Auto Complete)"); 
    regexType = 'all' 
    } 
    initAutocomplete(regexType); 
}) 

function initAutocomplete(regexType){ 
    if(regexType === 'all'){ 
    $("#tags").autocomplete({ 
    autoFocus: false, 
    delay: 300, 
    minLength: 1, 
    source: dataResult 
    }) 
    }else{ 
    $("#tags").autocomplete({ 
    autoFocus: false, 
    delay: 300, 
    minLength: 1, 
    source: 
    function(req, response) { 
     if(regexType === 'first'){ 
     var re = $.ui.autocomplete.escapeRegex(req.term); 
     var matcher = new RegExp("^" + re, "i"); 
     response($.grep(dataResult, function(item){ 
       return matcher.test(item); 
      })); 
     }else { 
       var re = $.ui.autocomplete.escapeRegex(req.term); 
      regex = "\\b_replace_\\b"; 
      re = regex.replace('_replace_', re); 
      console.log(re) 
      var matcher = new RegExp(re, "i"); 
      response($.grep(dataResult, function(item){ 
       return matcher.test(item); 
      })); 
     } 
     } 
    }) 
    } 
} 

}); 

正規表現式は、要件に応じて実装する必要があります。