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;
            }
        })
    });

您将能够通过此jsfiddle

了解我的问题

Answer 1

根据documentation自动完成“源”类型是一个字符串，数组或函数（请求，响应（数据）），在你的例子中你只传递一个字符串，而不是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 );
            }) );
        }
      }
  })
  }  
}

});

需要根据您的要求实施正则表达式。

Jquery不同类型的自动完成功能不起作用

1 个答案: