Question

您好我有一个自动完成功能，它通过查找数据库中的值来填充areaname。我想在多个ID上使用此功能（分为两部分）。首先是输入文本框，用于读取键，例如

#user_areaname, #company_areaname, #job_areaname

然后填写相应ID的ul列表，例如

#user_areaname_list, #company_areaname_list, #job_areaname_list

到目前为止，我可以使用一个类来使用类来获取数据＆＃34;这个＆＃34;但是我如何获得相应的列表来填充。另一个漫长的方法是为每个id写一个单独的函数，这看起来不像是智能编程。

html

<input type="text" class="addpropertyinput autocomplete-list-completed" name="user_areaname" id="user_areaname" placeholder="Area Name" onkeyup="autocomplete_areaname()" maxlength="50"  />
<ul class="autocomplete-list" id="user_areaname_list"></ul>

jquery / ajax

// Autocomplete Areaname ------------------------------------------- ----------------------

function autocomplete_areaname()
{
    var min_length = 3; // min caracters to display the autocomplete
    var keyword2 = $('#job_areaname').val();
    if (keyword2.length >= min_length)
    {
        $.ajax(
        {
            url: 'classes/autocomplete.php',
            type: 'POST',
            data:
            {
                keyword2: keyword2
            },
            success: function(msg)
            {
                $('#job_areaname_list').show();
                $('#job_areaname_list').html(msg);
            }
        });
    }
    else
    {
        $('#job_areaname_list').hide();
    }
}

// set_item : this function will be executed when we select an item
function set_item2(item)
{
    // change input value
    $('#job_areaname').val(item);
    // hide proposition list
    $('#job_areaname_list').hide();
}

PHP

if (!empty($_POST['keyword2'])){

    $keyword2 = '%'.$_POST['keyword2'].'%';
    $select = $con->prepare("SELECT DISTINCT areaname_name FROM tbl_areaname WHERE areaname_name LIKE (:keyword2) ORDER BY areaname_name ASC LIMIT 0, 5");
    $select->setFetchMode(PDO::FETCH_ASSOC);
    $select->bindParam(':keyword2', $keyword2, PDO::PARAM_STR);
    $select->execute();
    $data = $select->fetchAll();
    foreach ($data as $row) {
        // put in bold the written text
        $areaname_name = str_ireplace($_POST['keyword2'], '<b>'.$_POST['keyword2'].'</b>', $row['areaname_name']);
        // add new option
        echo '<li onclick="set_item2(\''.str_replace("'", "\'", $row['areaname_name']).'\')">'.$areaname_name.'</li>';
    }
}

如果我使用

等类

var keyword2 = $('.areaname').val();
$('.areanamelist').show();

然后所有带有.areanamelist类的div显示ul。

同时尝试以下代码但不能正常工作（也没有控制台错误）

$("#job_areaname").keyup(function()
{
    var inputtextbox = "#job_areaname";
    var ullist = "#job_areaname_list";
    autocomplete_areaname();
    set_item2(item);
});
// Autocomplete Areaname -----------------------------------------------------------------
function autocomplete_areaname()
{
    var min_length = 3; // min caracters to display the autocomplete
    var keyword2 = $(inputtextbox).val();
    if (keyword2.length >= min_length)
    {
        $.ajax(
        {
            url: 'classes/autocomplete.php',
            type: 'POST',
            data:
            {
                keyword2: keyword2
            },
            success: function(msg)
            {
                $(ullist).show();
                $(ullist).html(msg);
            }
        });
    }
    else
    {
        $(ullist).hide();
    }
}
// set_item : this function will be executed when we select an item
function set_item2(item)
{
    // change input value
    $(inputtextbox).val(item);
    // hide proposition list
    $(ullist).hide();
}

Answer 1

假设所有输入文本框都具有相同的类addpropertyinput，您可以动态地将相应的input text box对象及其ullist id传递给函数autocomplete_areaname。 / p>

所以你的代码就像

$(".addpropertyinput").keyup(function()
{
    var inputtextbox = $(this);
    var id = $(this).attr('id')  // returns input text box id
    var ullist_id = "#" + id + "_list" // forming corresponding ullist id from input text box id as you specified 
    autocomplete_areaname(inputtextbox, ullist_id);
});

function autocomplete_areaname(inputtextbox, ullist_id)
{
    var min_length = 3; 
    var keyword2 = inputtextbox.val();
    if (keyword2.length >= min_length)
    {
        $.ajax(
        {
            url: 'classes/autocomplete.php',
            type: 'POST',
            data:
            {
                keyword2: keyword2
            },
            success: function(msg)
            {
                $(ullist_id).show();
                $(ullist_id).html(msg);
            }
        });
    }
    else
    {
        $(ullist_id).hide();
    }
}

要调用set_item2函数，请将input text box id的数据属性添加到每个<li>标记

喜欢<li data-input-text-id = "area_username"></li>

点击事件以设置项目值：

$(li).on("click", function(){
 input-text-box-id = $(this).attr("data-input-text-id");
 $("#"+input-text-box-id).val($(this).text());

}）

希望它会对你有所帮助:)。

Answer 2

将您的函数更改为take参数，这样您就可以传递不同元素的id。

array_filter()

设定项目功能可以如下进行。

// the first parameter is the text input pass it like 'someid'
// the second parameter is where you want to display the results pass it like $('#someid')
// pass first parameter as a string 
function autocomplete_areaname(getValue, showResult) {
    var min_length = 3; // min caracters to display the autocomplete
    var keyword2 = $('#' + getValue).val();
    if (keyword2.length >= min_length) {
        $.ajax(
            {
                url: 'classes/autocomplete.php',
                type: 'POST',
                data: {
                    keyword2: keyword2,
                    clas: getValue
                },
                success: function (msg) {
                    showResult.show();
                    showResult.html(msg);
                }
            });
    }
    else {
        showResult.hide();
    }
}

您可以使用此功能

// input is where we want to set the value and ulList is where we are going to select the values from 
// pass parameters like $('#someid')
function set_item(li, input) {
   input.val($(li).html());
   $(li).parent().hide();
}

PHP代码

// detect keyup and make AJAX calls
// pass first parameter as a string 
$('#user_areaname').on('keyup', function () {
    autocomplete_areaname('user_areaname', $('#user_areaname_list'));
});
$("#job_areaname").on('keyup', function () {
    autocomplete_areaname('job_areaname', $('#job_areaname_list'));
});

Answer 3

您可以使用数组（在PHP和Jquery中）来完成它...我已经测试了它并且它可以工作....

您的HTML将如下所示

<div class="autocomplete-list1">
<input type="text" class="addpropertyinput autocomplete-list-completed" name="user_value" id="user_value" placeholder="value" onkeyup="autocomplete_1()" value="<?php echo $data['user_value']; ?>" maxlength="50"  />
<ul class="autocomplete-list" id="user_value_list"></ul>
</div>

您的Jquery文件将如下所示

var selectedvalue = [];

$( document ).ready(function() {
    $("#user_value").keydown(function() { selectedvalue = ["#user_value", "#user_value_list", "value"]; }); 
}); 


// autocomplete ------------------------------------------

function autocomplete_1()
{
    var min_length = 3; // min caracters to display the autocomplete
    var keyword = $(selectedvalue[0]).val();
    var arrayselector = selectedvalue[2];
    if (keyword.length >= min_length)
    {
        $.ajax(
        {
            url: 'classes/autocomplete.php',
            type: 'POST',
            data:
            {
                keyword: keyword, arrayselector: arrayselector
            },
            success: function(msg)
            {
                $(selectedvalue[1]).show();
                $(selectedvalue[1]).html(msg);
            }
        });
    }
    else
    {
        $(selectedvalue[1]).hide();
    }
}

// set_item : this function will be executed when we select an item
function set_item(item)
{
    // change input value
    $(selectedvalue[0]).val(item);
    // hide proposition list
    $(selectedvalue[1]).hide();
}

您的PHP文件将如下所示

// autocomplete

    $arrayselector = $_POST['arrayselector'];

    if ($arrayselector == "value") { $searchvalue = array("value_name", "tbl_value"); }


    if (!empty($_POST['keyword'])){

        $keyword = '%'.$_POST['keyword'].'%';
        $select = $con->prepare("SELECT DISTINCT $searchvalue[0] FROM $searchvalue[1] WHERE $searchvalue[0] LIKE (:keyword) ORDER BY $searchvalue[0] ASC LIMIT 0, 5");
        $select->setFetchMode(PDO::FETCH_ASSOC);
        $select->bindParam(':keyword', $keyword, PDO::PARAM_STR);
        $select->execute();
        $data = $select->fetchAll();
        foreach ($data as $row) {

            // select the column name based
            if ($arrayselector == "value") { $row = $row['value_name']; }

            // put in bold the written text
            $listvalue = str_ireplace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $row);
            // add new option
            echo '<li onclick="set_item(\''.str_replace("'", "\'", $row).'\')">'.$listvalue.'</li>';
        }
    }

然后您可以根据条件更改数组中的值：即。无论你想要哪个元素自动完成...

在Ajax函数中使用多个ID

3 个答案: