Question

我正在尝试将普通字段转换为自动完成并进行ajax调用以获取JSON中的数据，然后将其设置为自动完成。

我对JQUERY知之甚少，我花了大约5-6个小时才知道我必须在使用自动完成字段上的任何功能之前进行初始化。

到目前为止我做了什么 我设法初始化并将我的文本字段转换为自动完成，并检查使用inspect选项显示自动完成，并且还能够使用f12网络选项进行ajax调用以验证数据。但它不会显示为我的自动填充选项中的提前输入类型。

HTML

<div id ="myName">
    <table class="some_class">
        <tbody>
            <tr>
                <td >
                    <label>NAMES</label>
                </td>
            </tr>
            <tr>
                <td >
                    <input type="text" id="nameText" />
                </td>
            </tr>
        </tbody>
    </table>            
</div>

初始化部分

    myName.on('valueChange',function (value){
    $("#nameText").autocomplete({
       appendTo:"#nameText",
       source:function(event,ui){
    var name=myName.value();
    $.ajax({
    url: "www.getmeSomeData.com/query/name:"+name,
    type:"GET".
    dataType:"json",
    success:function(result){
    //set this result in autocomplete which I am not sure how to do
    }
    });
    },minLength:1});
    });

$("#nameText").focus(function(even,ui){
$((this).data("uiAutocomplete").search$(this).val());
});

问题

1.即使从ajax调用我看到json数据到来，自动完成也不会显示任何结果。 2.只有在我键入abc之后才开始更改值，然后将光标移动到其他位置，然后再将其单击回来，之前没有任何内容调用。当我输入a或ab或abc时，它应该进行ajax调用并在自动完成下拉列表中显示数据。

有人可以帮忙吗？我没有经过研究就没来过这里，但我觉得我尝试了很多东西而没有任何工作，所以我完全糊涂了。请帮助我，我花了大约2天时间。

提前致谢。

Answer 1

我终于弄清楚我的代码中出了什么问题。我实际上无法为我的输入自动完成添加选项。为了使其工作，我需要用

更新我的html

<强> HTML 只需替换<input class="nameClass" type="text" id="nameText" />

jquery部分需要更新，上面只是一个非常新手尝试。

 1. I should have used $.each($(".nameClass"), function(index, item) {
 2. and then $(item).autocomplete
 3. Also in source should have used source:function(request,response)
 4. In the ajax call request.term (which will take whatever you input in the autocomplete field where as my method was invoking the ajax call only after tab out.
 5. Map the data of response response($.map(data.data, function(item){
 6. Write a select callback function to make anything happen after i click on any entry in the typeahead
 7.data("ui-autocomplete")._renderItem = function (ul, item) { >To show the data in a formatted way after the ajax call.

<强> INITIALIZATION

 $.each($(".nameClass"), function(index, item) {
    $(item).autocomplete({
       source:function(request,response){
    $.ajax({
    url: "www.getmeSomeData.com/query/name:"+request.term,
    type:"GET".
    dataType:"json",


success:function(result){
    //set this result in autocomplete which I am not sure how to do
      response($.map(data.data, function(item){
                  return{
                  value:item.somethigncomingfromJson //will set into the field
                  data:item
                }}))}}
     });
    } ,minLength :2,
    select:function(event,ui){
   //do something on select of a row in the autocomplete dropdown
    }}).data("ui-autocomplete")._renderItem=function(ul,item){
   return $("format in which you want to see the data").appendTo(ul);
   });
  }

不需要其他活动。

Jquery自动完成小部件实现

1 个答案: