Question

我有一个bootstrap模式对话框，我有一个文本框，我想利用jQuery UI Autocomplete小部件的功能。但是，自动完成小部件根本不会被触发。我知道这一点，因为我在控制器上的操作上放置了一个断点，它应该返回由自动完成文本框呈现的Json。动作永远不会被击中

出于对我做错事的好奇，我将文本框粘贴到View上，令我沮丧的是，我在控制器中操作的断点被击中了。我已经缩小了这个范围，可能是文本框从未连接到DOM加载后使用自动完成功能。这是我的模态

上的文本框

  package com.example.beetel.moviesApp;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import com.example.beetel.moviesApp.adapter.MoviesDetailsViewPagerAdapter;
import com.example.beetel.moviesApp.data.model.MovieResultListModel;
import com.example.beetel.moviesApp.utilities.MovieAPIUtility;

import butterknife.ButterKnife;

/**
 * Created by beetel on 4/03/2016.
 */
public class DetailsFragmentActivity extends Fragment {
    ImageView imgPoster;

    private MovieResultListModel.ResultModel model;
    private ViewPager viewPager;
    private TabLayout tabLayout;

    private boolean fromactivity=true;
    private boolean twoPane=false;
    public DetailsFragmentActivity(){}
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        Toolbar toolbar2 = (Toolbar) getActivity().findViewById(R.id.toolbar_movie_detail);
        imgPoster = (ImageView) getActivity().findViewById(R.id.toolbar_image_backdrop);
        if (getActivity().findViewById(R.id.multipan) != null) {
            twoPane = true;
            toolbar2.setTitle(model.getOriginalTitle());
        }
        if (!twoPane)

            ((AppCompatActivity)getActivity()).getSupportActionBar().setTitle(model.getOriginalTitle());
            try {
                setViewpagerAndBackDrop();
            } catch (NullPointerException e) {
                e.printStackTrace();
            }
        }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater,@Nullable ViewGroup container,@Nullable Bundle savedInstanceState)
    {
        View view=inflater.inflate(R.layout.movie_fragment_main,container,false);
        ButterKnife.bind(this,view);

        model=getActivity().getIntent().getParcelableExtra(MovieAPIUtility.EXTRA_RESULT_MODEL);

        if(model==null){
            model=this.getArguments().getParcelable(MovieAPIUtility.EXTRA_RESULT_MODEL);
            fromactivity=false;

        }
        return view;
    }
  private void setViewpagerAndBackDrop()
    {
        viewPager=(ViewPager)getActivity().findViewById(R.id.vp_movie_detail);
        tabLayout=(TabLayout)getActivity().findViewById(R.id.tabs);
        //FragmentManager fragmentManager=this.getFragmentManager();
        MoviesDetailsViewPagerAdapter pagerAdapter=new MoviesDetailsViewPagerAdapter(getActivity().getSupportFragmentManager(),model);
        pagerAdapter.notifyDataSetChanged();

        viewPager.setAdapter(pagerAdapter);
        tabLayout.setupWithViewPager(viewPager);

        Glide.with(DetailsFragmentActivity.this)
                .load(MovieAPIUtility.URL_IMAGE_BACKDROP_BASE+model.getBackdropUrl())
                .error(R.drawable.poster)
                .centerCrop()
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(imgPoster);
    }

    }

这是返回Json

的action方法

 <input type="text" name="someName" id="autocomplete" data-autocomplete-url="@Url.Action("Autocomplete", "warehouses")" />

以下是我如何连接文本框以使用自动完成小部件

public ActionResult Autocomplete(string term)
    {
        string[] names = { "Auma", "Dennis", "Derrick", "Dylan", "Mary", "Martha", "Marie", "Milly", "Abel", "Maria", "Bergkamp", "Arsene", "Alex", "Mwaura", "Achieng" };
        var filtered = names.Where(a => a.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0);
        return Json(filtered, JsonRequestBehavior.AllowGet);
    }

}）;

我已经看到了类似的问题，但没有一个是因为没有被击中的动作。

Answer 1

根据Bootstrap 3的文档，它们公开了一组可以与大多数JS功能挂钩的事件。

在这种情况下，事件是： 显示，显示，隐藏，隐藏和加载

以下代码将在显示模式后初始化自动完成输入字段。（将myModal替换为您要显示的模态的id）

$(document).ready(function () {
  $('#myModal').on('shown.bs.modal', function (e) {

    $("#autocomplete').autocomplete('destroy'); //remove autocompete to reattach
    $('#autocomplete').autocomplete({
      source: $(this).data('autocomplete-url'),
      data: {term: $(this).val() }
    });

  });
});

如果要获取包含输入字段的partial并在切换期间将其附加到模式，则最好在该ajax请求的回调中执行此初始化。

JQuery UI自动完成小部件无法在引导模式上工作

1 个答案: